【动画 widget】Flutter ImplicitlyAnimatedWidget

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 做的事情。

1. 根据 参数 duration 创建 AnimationController
2. 根据 参数 curve 创建 Animation
3. 在 initState 阶段添加 AnimationController 的监听，当动画结束，调用由参数 onEnd 提供的回调函数。
4. 初始化 Tween。
5. 在 didUpdateWidget 更新 Tween，如果 Tween 有变化，恢复 controller.value 为 0 ，启动动画执行一次。

 _controller
      ..value = 0.0
      ..forward();

forEachTween 方法

我们在自定义子类的时候需要复写 forEachTween 方法

void forEachTween(TweenVisitor<dynamic> visitor);

forEachTween 的作用

1. 初始化每一个可变化属性的 tween。
2. 更新每一个可变化属性的 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 讲过了，不再赘述。