Flutter ImplicitlyAnimatedWidget 是一个 StatefulWidget,它的作用是生成一个有动画功能的 widget. 和 AnimatedWidget 不同,他不需要传入 Listenalbe。
源码分析
widget 的构造函数
const ImplicitlyAnimatedWidget({ super.key, this.curve = Curves.linear, required this.duration, this.onEnd, }) } 复制代码
ImplicitlyAnimatedWidget 是一个抽象类,所以即使他是一个 widget,也不能直接用。 相比于 AnimatedWidget,它不需要 Listenable 对象,但多了 curve,duration,和 onEnd 参数。前两个参数是用来生成 AnimationController 的。
widget 只是配置,逻辑在 State 类,State 分两个类: ImplicitlyAnimatedWidgetState 是一级抽象类,AnimatedWidgetBaseState 是二级抽象类。代码内容可以在 Flutter 中查看。
先说 ImplicitlyAnimatedWidgetState 做的事情。
- 根据 参数 duration 创建
AnimationController
- 根据 参数 curve 创建
Animation
- 在 initState 阶段添加
AnimationController
的监听,当动画结束,调用由参数 onEnd 提供的回调函数。 - 初始化 Tween。
- 在 didUpdateWidget 更新 Tween,如果 Tween 有变化,恢复
controller.value
为 0 ,启动动画执行一次。
_controller ..value = 0.0 ..forward(); 复制代码
forEachTween 方法
我们在自定义子类的时候需要复写 forEachTween 方法
void forEachTween(TweenVisitor<dynamic> visitor); 复制代码
forEachTween 的作用
- 初始化每一个可变化属性的 tween。
- 更新每一个可变化属性的 tween。
TweenVisitor 是一个函数签名
typedef TweenVisitor<T extends Object> = Tween<T>? Function(Tween<T>? tween, T targetValue, TweenConstructor<T> constructor); 复制代码
参数 tween 为当前 tween 值,targetValue 是将要达到的值。当 tween 为空的时候,TweenConstructor 用来初始化 teewn。
自定义 ImplicitlyAnimatedWidget 子类的时候,不用关心如何初始化 tween,更新 tween,只要 override forEachTween 方法,ImplicitlyAnimatedWidget 就为我们做好一切了。
AnimatedWidgetBaseState
abstract class AnimatedWidgetBaseState<T extends ImplicitlyAnimatedWidget> extends ImplicitlyAnimatedWidgetState<T> { @override void initState() { super.initState(); controller.addListener(_handleAnimationChanged); } void _handleAnimationChanged() { setState(() {/* The animation ticked. Rebuild with new animation value */}); } } 复制代码
AnimatedWidgetBaseState 是二级抽象类。只完成一件事,rebuild。一般情况下,我们会直接从 AnimatedWidgetBaseState 继承,但是如果你要自己触发 rebuild,可以直接从 ImplicitlyAnimatedWidget 继承。
通过代码可以知道,ImplicitlyAnimatedWidget,AnimatedWidgetBaseState 帮我们把动画的准备工作都做好了。
使用 ImplicitlyAnimatedWidget
使用 ImplicitlyAnimatedWidget 很方便的,不需要再手动创建 controller,只需要给他需要变化的属性即可。
AnimatedWidget 举的例子是不断放大的正方形,我们这次还是用正方形,不过不能循环放大缩小了,只能等按钮点击的时候再放大缩小。这也是 ImplicitlyAnimatedWidget 受限的地方。因为 AnimationController 隐藏在内部了。
class AnimatedBox extends ImplicitlyAnimatedWidget { const AnimatedBox( {super.key, required super.duration, required this.width, required this.height}); final double width; final double height; @override AnimatedBoxState<AnimatedBox> createState() => ImplicitlyAnimatedWidgetState(); } class AnimatedBoxState extends AnimatedWidgetBaseState<AnimatedBox> { Tween<double>? _width; Tween<double>? _height; @override Widget build(BuildContext context) { return Container( width: _width!.evaluate(animation), height: _height!.evaluate(animation), color: Colors.blue[200], ); } @override void forEachTween(TweenVisitor<dynamic> visitor) { _width = visitor(_width, widget.width, (value) => Tween<double>(begin: value)) as Tween<double>; _height = visitor(_height, widget.height, (value) => Tween<double>(begin: value) as Tween<double>; } } 复制代码
class MyAnimation extends StatefulWidget { const MyAnimation({super.key}); @override State<MyAnimation> createState() => _MyAnimationState(); } class _MyAnimationState extends State<MyAnimation> { double width = 100; double height = 100; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( floatingActionButton: ElevatedButton( child: Text('press'), onPressed: () { setState(() { width = width > 0 ? 0 : 100; height = height > 0 ? 0 : 100; }); }, ), body: Center( child: AnimatedBox( width: width, height: height, duration: Duration(seconds: 1), )))); } } 复制代码
代码比 AnimatedWidget 多了好多。感觉对于这个例子来说, AnimatedWidget 是更好的选择。ImplicitlyAnimatedWidget 之所以需要这么多代码,是因为 ImplicitlyAnimatedWidget 规定了如何初始化和更新 tween,我们需要按他的方式写。但是一旦有复杂的动画,ImplicitlyAnimatedWidget 优势就体现出来了。
AnimatedWidget 和 ImplicitlyAnimatedWidget 相当于是 自行车与飞机的区别。如果路不远,骑自行车就可以了,轻便,灵活性好,可以决定如何走,何时走。但要出远门,就得坐飞机了,坐飞机快,但必须按固定的航线走,也不能停下来。
本例为了演示如何用 ImplicitlyAnimatedWidget,真要实现这样的效果,可以用 AnimatedContainer
性能优化
性能优化也是 const 关键字和 child,已经 在 AnimatedWidget 讲过了,不再赘述。