动画有很多不同的选项,有时您要做的只是为widget实现动画
在许多情况下,只需使用AnimatedWidget,即可使用widget实现动画。
AnimatedWidget并不是一个单独的小部件,因为它是一个抽象类。
但是它是创建自己的动画的一个强大的工具,有一些已为您构建的AnimatedWidgets 查找诸如SlideTransition、RotationTransition和其他FooTransitions之类的widget
SizeTransition
FadeTransition
AlignTransition
ScaleTransition
DecoratedBoxTransition
DefaultTextStyleTransition
PositionedTransition
SlideTransition
RotationTransition
FooTransition
ButtonTransition
但是,如果这些都不以您想要方式实现动画处理,那么该是时候建立自己的了
首先扩展AnimatedWidget,它需要两件事:
第一是构建一个返回要实现动画的widget的方法
第二种是将通知您的widget,有关诸如动画的更新值的东西,您可以将其命名为“一个东西”,任何与您自定义AnimatedWidget有意义的就好了。但是对于构造函数,您需要将其作为listenable参数传递给AnimatedWidget超类。
然后添加一个吸气剂,使listenable在您要实现动画的widget中可用
最后,返回到build方法,并在对您的widget有意义的地方使用此值
class ButtonTransition extends AnimatedWidget {
const ButtonTransition({width}) : super(listenable: width);
Animation<double> get width => listenable
@override
Widget build(BuildContext context) {
return OutlineButton(
onPressed: () => print("Hello"),
child: Text("Click Me!"),
borderSde: BorderSize(width: width.value),
);
}
}
恭喜你!
您需要某种动画才能使用此widget,而获得该动画最简单方法是在有状态widget种创建AnimationController,确保在initState中初始化控制器,并在dispose中将其处置。
有了该控制器后,您现在可以在任何有意义的地方开始停止或重复您的动画
class _MyWidgetState extends State<MyWidget> with SingleTrickerProviderStateMixin {
AnimationController _controller;
// ...
@override
Widget build(BuildContext context) {
return ButtonTransition(size: _controller);
}
// ...
}
如果想了解有关AnimatedWidget的内容,或者关于Flutter的其他功能,请访问flutter.dev
原文翻译自视频:视频地址