【动画 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

使用 AnimatedWidget 很方便的,不需要再手动创建 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 讲过了,不再赘述。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容