Flutter 中的 Animations（三）

如果没有看过之前两节的，建议先看看前两节的内容

上一节中我们主要做的事情如下：

在 Animation 的 addListener(...) 中调用 setState(...) 来给 widget 添加动画
使用 AnimatedWidget 的方法来给 widget 添加动画

上一节中我们也通过案例的形式展现出以上两种方式的区别，得出的结论就是如下：使用 addListener(...) 和 setState(...) 给 Widget 添加动画的时候，会导致其他的 Widget 也跟着重绘，而使用 AnimatedWidget 的方式给 Widget 添加动画的时候只会重绘当前的 Widget

这是为什么呢？？？

我们先来看看动画的执行流程。

我们在使用动画的时候会初始化一个 AnimationController

AnimationController controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
复制代码

可以看出，初始化 AnimationController 需要传递两个参数，一个是 vsync 一个是 duration ，这个 duration 很容易理解，就是动画执行完毕需要的时长，那 vsync 是什么啊？上述代码中我们传入了 this ，那是因为我们在 State 类 with（混入，第一节有讲） 了 SingleTickerProviderStateMixin，下面我们看看初始化 AnimationController 时都干了什么事，源码如下：

AnimationController({
    double value,
    this.duration,
    this.debugLabel,
    this.lowerBound: 0.0,
    this.upperBound: 1.0,
    @required TickerProvider vsync,
  }) : assert(lowerBound != null),
       assert(upperBound != null),
       assert(upperBound >= lowerBound),
       assert(vsync != null),
       _direction = _AnimationDirection.forward {
    _ticker = vsync.createTicker(_tick);
    _internalSetValue(value ?? lowerBound);
  }
复制代码

我们抽重点出来看

_ticker = vsync.createTicker(_tick);
复制代码

这里调用了 vsync 的 createTicker(...) 方法创建了一个 Ticker，而我们在初始化 AnimationController 的时候 vsync 参数传的是 SingleTickerProviderStateMixin，SingleTickerProviderStateMixin#createTicker(...) 的源码如下：

Ticker createTicker(TickerCallback onTick) {

    ...
    
    _ticker = new Ticker(onTick, debugLabel: 'created by $this');
    
    ...
    
    return _ticker;
  }
复制代码

这个 Ticker 是个什么东西呢？看看它的注释吧！以下为 Ticker 类的部分注释

Calls its callback once per animation frame.

When created, a ticker is initially disabled. Call [start] to enable the ticker.

Creates a ticker that will call the provided callback once per frame while running.

第一句的大概意思就是 Ticker 类在每一帧动画中都会调用他自己的回调一次
第二句的大概意思就是 当 Ticker 被创建之后，默认是不可用（disabled）的，可以调用 start 方法来使 Ticker 变得可用（enable）
第三句的大概意思就是 创建一个 Ticker，他将在运行时的每一帧都会调用一次所提供的回调

创建 Ticker 到这儿就完了。如何让Ticker可用呢，也就是如何调用它的 start 方法呢？

我们在启动动画的时候会调用 AnimationController#forward() ，在 forward() 方法中就间接的会调用到 Ticker#start()， Ticker#start() 最后会调用到 scheduleFrame() ，而这个方法里面调用了 ui.window.scheduleFrame(); ，这个 scheduleFrame() 是一个 Native 方法，如下：

void scheduleFrame() native 'Window_scheduleFrame';
复制代码

上面的方法应该就是调度屏幕刷新的（如有错误，请指出，谢谢）。

到这里，Ticker 也就 start 了，然后 Ticker 就会在动画的每一帧去调一次自己的回调，这个回调是在 AnimationController 中的构造方法中创建 Ticker 的时候传入的 _ticker = vsync.createTicker(_tick);

我们来看看 _tick 部分源码：

void _tick(Duration elapsed) {
    
    ...
    
    notifyListeners();
    _checkStatusChanged();
  }
复制代码

这里面调用了 notifyListeners() 和 _checkStatusChanged()，我们先来看看 notifyListeners()，部分源码如下：

void notifyListeners() {
    final List<VoidCallback> localListeners = new List<VoidCallback>.from(_listeners);
    for (VoidCallback listener in localListeners) {
      try {
        if (_listeners.contains(listener))
          // 执行回调
          listener();
      } catch (exception, stack) {
        ...
      }
    }
  }
复制代码

可以看出，notifyListeners() 中有一个 VoidCallback 的集合，然后遍历这个集合，并且执行集合中所有的回调。

通常我们会使用 .addListener((){...}) 给动画添加监听，我们在调用addListener((){...})之后会执行如下源码

void addListener(VoidCallback listener) {
    didRegisterListener();
    _listeners.add(listener);
  }
复制代码

将我们传入的回调方法添加到_listeners集合中，也就是上面 notifyListeners() 方法中遍历的集合。

这里我们来小结一下动画的执行流程

创建动画
- 创建 Ticker，并 传入回调，回调里面会执行 notifyListeners() 方法，此方法中会去遍历_listeners集合，并执行集合中的每一个回调方法
给动画添加监听
- 这里监听时传入的回调会被添加到 _listeners 集合中去
启动动画
- 会调用 ticker.srtart() 来启动 Ticker，然后 Ticker 在动画的每一帧都会 执行回调，也就是我们在第一步中传入的

接下来就是我们在 addListener((){...}) 中干的事情了，通常会这样

_controller.addListener(() {
      setState(() {

      });
    });
复制代码

也就是我们会在传入的回调方法中去执行 setState((){}) 方法，我们可以看看文档：

setState(VoidCallback fn) 部分文档如下：

Notify the framework that the internal state of this object has changed.

Calling [setState] notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a [build] for this [State] object.

大概意思就是：通知 framework 当前对象的内部状态发生改变，这个操作会导致再次调用当前 State 对象的 build 方法，相当于重绘当前对象。

结合之前的分析，整个动画过程就是，当动画启动之后，会不停的去执行addListener((){...})中的回调，而我们在监听回调中又调用了setState(...)方法，所以这就导致当前对象不停的重绘，也就出现了屏幕上的动画的效果。

回到之前的问题： 使用 addListener(...) 和 AnimatedWidget 为什么会出现那种区别呢？

其实我们来看下 AnimatedWidget 的源码立马就明白了

abstract class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({
    Key key,
    @required this.listenable
  }) : assert(listenable != null),
       super(key: key);
       
  final Listenable listenable;


  @protected
  Widget build(BuildContext context);

  @override
  _AnimatedState createState() => new _AnimatedState();
  
  ...
  
}
复制代码

我们可以看到 AnimatedWidget 继承自 StatefulWidget，而 StateFulWidget 在初始化的时候会去创建一个 State 对象来管理自身的状态，也就是回去执行 createState() 方法。

其实到这里已经可以解释两种动画方式存在的区别，因为 AnimatedWidget 内部也有一个 State 对象来管理这自身的状态，而我们之前通过查看文档也知道一个 State 对象只会维护当前对象的状态，所以即使重绘，也只会导致当前 State 对象的重绘，而不会导致其他 State 对象的重绘。

我们来继续看看 AnimatedWidget 中的 createState() 干了什么事，它里面调用了_AnimatedState() 方法，部分源码如下：

class _AnimatedState extends State<AnimatedWidget> {
  @override
  void initState() {
    super.initState();
    widget.listenable.addListener(_handleChange);
  }

...

  @override
  void dispose() {
    widget.listenable.removeListener(_handleChange);
    super.dispose();
  }

  void _handleChange() {
    setState(() {
      // The listenable's state is our build state, and it changed already.
    });
  }

  @override
  Widget build(BuildContext context) => widget.build(context);
复制代码

明白了吧！！！

_AnimatedState 在 initState 中给 widget 的 listenable 添加了监听，这里的listenable 就是我们在初始化一个 AnimatedWidget 是传入的 Animation 对象。

而 addListener 中传入的回调是 _handleChange()，在 _handleChange() 中同样调用了 setState(...)来触发当前对象重绘。

好了，整个过程就是这样了。如果有什么错误，欢迎大家指出，谢谢！！！