Flutter动画

flutter动画简介

在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。我们将UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数。在UI系统中，动画的平均帧率是重要的性能指标，而在Flutter中，理想情况下是可以实现 60FPS 的，这和原生应用能达到的帧率是基本是持平的。

flutter中动画抽象

Flutter中也对动画进行了抽象，主要涉及 Animation、Curve、Controller、Tween这四个角色，它们一起配合来完成一个完整动画，下面我们一一来介绍它们。

Animation

• Animation 是一个抽象类，它本身和UI渲染没有任何关系，而它主要的功能是保存动画的插值和状态
• Animation对象是一个在一段时间内依次生成一个区间(Tween)之间值的类
• 在动画的每一帧中，我们可以通过Animation对象的value属性获取动画的当前状态值。
  动画通知
  我们可以通过Animation来监听动画每一帧以及执行状态的变化。
  1.addListener()；它可以用于给Animation添加帧监听器，在每一帧都会被调用。animation.value获取当前动画值。
  2.addStatusListener()；它可以给Animation添加“动画状态改变”监听器；动画开始、结束、正向或反向（见AnimationStatus定义）时会调用状态改变的监听器。

AnimationController

• AnimationController用于控制动画，它包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法。
• AnimationController会在每一个动画帧，就会生成一个新的值。
• AnimationController派生自Animation<double>，因此可以在需要Animation对象的任何地方使用。
• 在动画开始执行后开始生成动画帧，屏幕每刷新一次就是一个动画帧，在动画的每一帧，会随着根据动画的曲线来生成当前的动画值，然后根据当前的动画值去构建UI，当所有动画帧依次触发时，动画值会依次改变，所以构建的UI也会依次变化，所以最终我们可以看到一个完成的动画。

// AnimationController在给定的时间段内线性的生成从 0.0 到1.0（默认区间）的数字
// 下面代码创建一个Animation对象（但不会启动动画）
final AnimationController controller = AnimationController(
  duration: const Duration(milliseconds: 2000),
  vsync: this,
);

我们知道屏幕每刷新一次就会随着根据动画的曲线来生成当前的动画值，那屏幕刷新和动画之间是通过什么联系起来的呢，这里不得不提到Ticker。
Ticker
当创建一个AnimationController时，需要传递一个vsync参数，它接收一个TickerProvider类型的对象，它的主要职责是创建Ticker。
Flutter 应用在启动时都会绑定一个SchedulerBinding，通过SchedulerBinding可以给每一次屏幕刷新添加回调，而Ticker就是通过SchedulerBinding来添加屏幕刷新回调，这样一来，每次屏幕刷新都会调用TickerCallback。使用Ticker(而不是Timer)来驱动动画会防止屏幕外动画消耗不必要的资源，因为Flutter中屏幕刷新时会通知到绑定的SchedulerBinding，而Ticker是受SchedulerBinding驱动的，由于锁屏后屏幕会停止刷新，所以Ticker就不会再触发。

Curve

Animation对象在整个动画执行过程中输出的值可以是线性的、曲线的、一个步进函数或者任何其他曲线函数等等，这由Curve来决定。CurvedAnimation也是Animation<double>类型。

final CurvedAnimation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeIn);

Tween

默认情况下，AnimationController对象值的范围是[0.0，1.0]。如果我们需要构建UI的动画值在不同的范围或不同的数据类型，则可以使用Tween来添加映射以生成不同的范围或数据类型的值。

// 要使用 Tween 对象，需要调用其animate()方法
final Tween colorTween =
    ColorTween(begin: Colors.transparent, end: Colors.black54);
animation = colorTween..animate(animation);

示例

class _AnimatedPageState extends State<AnimatedPage>
    with SingleTickerProviderStateMixin {
  late AnimationController controller; // 动画控制器
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
    animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn);
    animation = Tween(begin: 0.0, end: 200.0).animate(animation)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        print("状态值: ${status}");
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: ListView(
          children: [
            ElevatedButton(
                onPressed: () {
                  controller.forward();
                },
                child: Text('开始动画')),
            Image.asset(
              'assets/head.png',
              width: animation.value,
              height: animation.value,
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

图片放大.gif