用一个demo理解一下Flutter动画内部的代码流程

先上代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Material(child: ScaleAnimationRoute()),
    ),
  );
}
//需要继承TickerProvider，如果有多个AnimationController，则应该使用TickerProviderStateMixin。
class _ScaleAnimationRouteState extends State<ScaleAnimationRoute> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );
    //图片宽高从0变到300
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller) //tag0
      ..addListener(() { //tag1
        setState(() => {});
      });
    //启动动画(正向执行)
    controller.forward(); //tag2
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: Image.asset(
        "assets/banner1.png",
        width: animation.value,
        height: animation.value,
      ),
    );
  }

  dispose() {
    //路由销毁时需要释放动画资源
    controller.dispose();
    super.dispose();
  }
}

然后上图：

flutter动画代码流程.jpg

图片较大请放大看，然后开始分析：

1. 从tag0开始，这步生成了一个Tween，并设置了begin和end两个属性，然后调用animate方法，该方法内部创建了一个_AnimatedEvaluation对象，这是一个Animation实例，然后返回设置给了引用animation，这步操作在_AnimatedEvaluation内部保存了Tween.animate方法传入的参数AnimationController和Tween自身
2. 然后看tag1，该步骤调用了_AnimatedEvaluation的addListener方法，_AnimatedEvaluation是从父类AnimationWithParentMixin继承的该方法，在父类AnimationWithParentMixin里该方法的实现如下：

  // keep these next five dartdocs in sync with the dartdocs in Animation<T>

  /// Calls the listener every time the value of the animation changes.
  ///
  /// Listeners can be removed with [removeListener].
  void addListener(VoidCallback listener) => parent.addListener(listener);

其中parent是Tween.animate这步传入的AnimationController，所以执行的是AnimationController的addListener方法，所以监听的就是原始发送动画数据的类实例，后面不管嵌套多少层动画，原始数据都是从AnimationController这里获取的值，范围是0.0-1.0，然后看一下AnimationController这个类：

class AnimationController extends Animation<double>
  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
...
}

省略不相关代码，只看继承结构，AnimationController的addListener实现在父类AnimationLocalListenersMixin里面，所以tag1这步就把值改变时的监听方法保存到了AnimationController类

3. 然后看tag2，调用AnimationController的forward方法开始动画后，方法内部执行_animateToInternal方法，然后animateToInternal内部执行notifyListeners和_checkStatusChanged遍历值监听和状态监听列表，然后我们的监听方法就被回调了，我们在回调里执行了setState方法刷新界面，然后在_ScaleAnimationRouteState的build方法里调用animation.value获取了变化的值，然后我们分析animation.value这个步骤：
   3.1 因为animation是_AnimatedEvaluation的实例，所以我们看这个类的内部value的方法实现，该方法源码如下：

  @override
  T get value => _evaluatable.evaluate(parent);

其中_evaluatable看tag0这步得知该实例是Tween，parent是AnimationController实例，
然后看Tween的内部方法_evaluatable

  /// The current value of this object for the given [Animation].
  ///
  /// This function is implemented by deferring to [transform]. Subclasses that
  /// want to provide custom behavior should override [transform], not
  /// [evaluate].
  ///
  /// See also:
  ///
  ///  * [transform], which is similar but takes a `t` value directly instead of
  ///    an [Animation].
  ///  * [animate], which creates an [Animation] out of this object, continually
  ///    applying [evaluate].
  T evaluate(Animation<double> animation) => transform(animation.value);

Tween的evaluate方法内部执行transform(animation.value)，其中animation是AnimationController，AnimationController的animation的value范围是0.0-1.0，transform内部是实际将0.0-1.0转换成了对应的值，也就是页面调用animation(这个是我们的测试代码的animation，是_AnimatedEvaluation实例，不要和transform方法里的搞混).value方法后获得的计算好的值，可以看一下Tween的transform方法

  @override
  T transform(double t) {
    if (t == 0.0)
      return begin;
    if (t == 1.0)
      return end;
    return lerp(t);
  }

分析完了，这就是整个流程，复杂动画可能会嵌套多个动画效果，但是万变不离其宗，原理都是一样的，图片里的[]实际就是()，但是这个starUML用了小括号后面就不能打字了，所以看的时候不要在这里迷糊就好，有问题请在下面留言，一起学习。