《Flutter攻略》之Animation运行原理

首先，如果你还不知道什么是Flutter的话，请看这里,简单讲就是Google自己的React Native。它使用的编程语言是Dart，如果不知道什么是Dart的话请看这里。有人可能会问这两个东西听都没听过，学了有用吗？我的答案是“俺也不知道”。
废话都多说，下面开始学习Flutter的Animation。

Example

我们先来看下最后的运行结果：

基本逻辑就是点击按钮，执行一个Animation，然后我们的自定义View就会根据这个Animation不断变化的值来绘制一个圆形。接下来就看看代码是怎么实现的？

class _AnimationPainter extends CustomPainter{

  Animation<double> _repaint ;
  _AnimationPainter({
    Animation<double> repaint
  }):_repaint = repaint,super(repaint:repaint);

  @override
  void paint(Canvas canvas, Size size){
    final Paint paint = new Paint()
      ..color = Colors.red[500].withOpacity(0.25)
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(new Point(size.width/2, size.height/2), _repaint.value, paint);
  }

  @override
  bool shouldRepaint(_AnimationPainter oldDelegate){
    return oldDelegate._repaint != _repaint;
  }
}

首先我们先来自定义一个Painter,这个Painter继承自CustomPainter，构造方法中接收一个Animation对象。在它的paint()方法中使用_repaint.value作为圆形的半径进行绘图。

接下来我们再看主布局：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo')
      ),
      body: new Center(
        child: new CustomPaint(
          key:new GlobalKey(),
          foregroundPainter: new _AnimationPainter(
            repaint:_animation
          )
        )
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _startAnimation,
        tooltip: 'startAnimation',
        child: new Icon(Icons.add)
      )
    );
  }

可以看到我们使用了一个CustomPaint，在Flutter中这算是一个自定义布局。接着给它构造方法中的foregroundPainter参数传递一个我们之前定义的_AnimationPainter。
下面还定义了一个按钮，点击事件为_startAnimation：

  void _startAnimation() {
    _animation.forward(from:0.0);
  }

_startAnimation很简单，就是用来开始一个动画的。

OK，到这里布局就讲完了，这时候我们还缺啥？对了，我们还缺一个Animation对象，下面就定义一个：

  AnimationController _animation = new AnimationController(
    duration: new Duration(seconds: 3),
    lowerBound: 0.0,
    upperBound: 500.0
  );

大家可能会好奇AnimationController又是个啥玩意？它其实是Animation的一个子类，可以用来控制Animation行为。
到这里所有相关代码都交代完了，编译运行就能出结果。
完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: new FlutterDemo()
    )
  );
}

class FlutterDemo extends StatefulWidget {
  FlutterDemo({Key key}) : super(key: key);

  @override
  _FlutterDemoState createState() => new _FlutterDemoState();
}

class _FlutterDemoState extends State<FlutterDemo> {


  AnimationController _animation = new AnimationController(
    duration: new Duration(seconds: 3),
    lowerBound: 0.0,
    upperBound: 500.0
  );
  void _startAnimation() {
    _animation.forward(from:0.0);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Demo')
      ),
      body: new Center(
        child: new CustomPaint(
          key:new GlobalKey(),
          foregroundPainter: new _AnimationPainter(
            repaint:_animation
          )
        )
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _startAnimation,
        tooltip: 'startAnimation',
        child: new Icon(Icons.add)
      )
    );
  }
}

class _AnimationPainter extends CustomPainter{

  Animation<double> _repaint ;
  _AnimationPainter({
    Animation<double> repaint
  }):_repaint = repaint,super(repaint:repaint);

  @override
  void paint(Canvas canvas, Size size){
    final Paint paint = new Paint()
      ..color = Colors.red[500].withOpacity(0.25)
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(new Point(size.width/2, size.height/2), _repaint.value, paint);
  }

  @override
  bool shouldRepaint(_AnimationPainter oldDelegate){
    return oldDelegate._repaint != _repaint;
  }
}

Animation原理

事物的运动状态改变是需要外力的，Animation也一样从静止到运动(动画执行阶段)，肯定有一股外力的存在，那这股力量就是啥？我们来一探究竟。

在Flutter中的一切都是由flutter engine来驱动的，看下图：

由于flutter engine超出了我们讨论范围，我们这里只是假设它有一个叫做freshScreen()的方法，用于刷新屏幕。对了，这里的freshScreen就是我们Animation最原始的动力，接下来介绍一个叫做
Scheduler的类，如下图：

它是一个单例，它内部有一个callback列表，用来存储某些回调，而addFrameCallback方法就是往callback列表添加回调的。那这里的handleBeginFrame又是干么的呢？当flutter engine每调用一次freshScreen的时候，就回去调用Scheduler的handleBeginFrame方法，而在handleBeginFrame中会将callback列表中所有的回调调用一遍。并且会给每个回调传递一个当时的时间戳。到这里似乎还没有Animation什么事，我们继续往下看。

到这边我们应该知道系统中有个叫Schedule的类，你只要调用它的addFrameCallback方法，向其中添加回调，那么这个回调就因为界面的刷新而一直被调用。那么又是谁来使用addFrameCallback呢？答案就是Ticker。

Ticker是一个类似可控的计时器，调用它的start方法后，内部会调用它的_scheduleTick方法，其中会向Schedule中添加名为_tick的方法回调。而在_tick的方法回调中会调用到_onTick方法。这个_onTick方法是外部传入的，可自定义其中的内容。并且每一次调用_onTick都会传入一个时间参数，这个参数表示从调用start开始经历的时间长度。

那么到这里我们知道了，我们不必直接跟Schedule打交道，有一个更好用的Ticker，我们只要给Ticker传入一个回调，就能不断的拿到一个△t，这个△t = now-timeStart。正是这个△t为我们推来了Animation的大门。

OK，到这里我们知道了Animation动画执行的动力在哪了，接下来看看Animation内部是怎么利用Ticker实现的？

我们回到上面的小例子，抛开自定义的试图，关键的代码其实就两行，如下：

AnimationController _animation = new AnimationController(
    duration: new Duration(seconds: 3),
    lowerBound: 0.0,
    upperBound: 500.0
  );

_animation.forward(from:0.0);

分别是初始化一个动画和开始一个动画。那就从这两行入手，看看底下的源码实现。
先看构造函数：

  AnimationController({
    double value,
    this.duration,
    this.debugLabel,
    this.lowerBound: 0.0,
    this.upperBound: 1.0
  }) {
    assert(upperBound >= lowerBound);
    _direction = _AnimationDirection.forward;
    _ticker = new Ticker(_tick);
    _internalSetValue(value ?? lowerBound);
  }

这里没什么，只是初始化一些值，如动画的值得上下边界，执行时间和目前值。值得注意的是这里初始化了一个Ticker，我们看看Ticker的初始化都做了什么？

Ticker(TickerCallback onTick) : _onTick = onTick;

这里初始化了Ticker的_onTick方法，相当于传入了一个回调用于Ticker来和Animation_controller交互。具体先不看传入的这个_tick方法是啥，后面真正遇到了在做分析。

接着就是forward方法了，它的作用就是让Animation的值从当前值变化到最大值。若不设置参数，即默认为下限值。

  Future<Null> forward({ double from }) {
    _direction = _AnimationDirection.forward;
    if (from != null)
      value = from;
    return animateTo(upperBound);
  }

OK,这是一个异步的方法，重点在animateTo这个方法，继续：

Future<Null> animateTo(double target, { Duration duration, Curve curve: Curves.linear }) {
    Duration simulationDuration = duration;
    if (simulationDuration == null) {
      assert(this.duration != null);
      double range = upperBound - lowerBound;
      double remainingFraction = range.isFinite ? (target - _value).abs() / range : 1.0;
      simulationDuration = this.duration * remainingFraction;
    }
    stop();
    if (simulationDuration == Duration.ZERO) {
      assert(value == target);
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.completed :
        AnimationStatus.dismissed;
      _checkStatusChanged();
      return new Future<Null>.value();
    }
    assert(simulationDuration > Duration.ZERO);
    assert(!isAnimating);
    return _startSimulation(new _InterpolationSimulation(_value, target, simulationDuration, curve));
  }

虽然这里代码有些多，但大部分是一些条件判断和预处理，这里不需要理会，我们看关键的：

_startSimulation(new _InterpolationSimulation(_value, target, simulationDuration, curve));

这里引入了一个新的概念Simulation，它其实相当于一个时间t和坐标x及速度v的关系，它有一个x(t)方法，接受一个参数t及时间，返回t时间时x的值。在Animation中就是t时刻的值。而这个t就是Ticker产生的，我们接着往下看：

  Future<Null> _startSimulation(Simulation simulation) {
    assert(simulation != null);
    assert(!isAnimating);
    _simulation = simulation;
    _lastElapsedDuration = Duration.ZERO;
    _value = simulation.x(0.0).clamp(lowerBound, upperBound);
    Future<Null> result = _ticker.start();
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.forward :
      AnimationStatus.reverse;
    _checkStatusChanged();
    return result;
  }

这里也是做了一些值得初始化，关键的一句是：

 _ticker.start();

这里启动了Ticker,我们看看start里面又做了什么？

  Future<Null> start() {
    assert(!isTicking);
    assert(_startTime == null);
    _completer = new Completer<Null>();
    _scheduleTick();
    if (SchedulerBinding.instance.isProducingFrame)
      _startTime = SchedulerBinding.instance.currentFrameTimeStamp;
    return _completer.future;
  }

上面我们主要关注 _scheduleTick()这个方法，

  void _scheduleTick({ bool rescheduling: false }) {
    assert(isTicking);
    assert(_animationId == null);
    _animationId = SchedulerBinding.instance.scheduleFrameCallback(_tick, rescheduling: rescheduling);
  }

到这里小伙伴们应该已经看出来了，这里Ticker将自己的_tick方法回调注册到了Scheduler中，一旦注册完，随着屏幕的刷新，_tick将会被不停的调用，

  void _tick(Duration timeStamp) {
    assert(isTicking);
    assert(_animationId != null);
    _animationId = null;

    if (_startTime == null)
      _startTime = timeStamp;

    _onTick(timeStamp - _startTime);

    // The onTick callback may have scheduled another tick already.
    if (isTicking && _animationId == null)
      _scheduleTick(rescheduling: true);
  }

_tick方法中主要做了对时间的处理，它会将从开始到当前的时间间隔传给_onTick这个方法，而这个方法就是之前AnimationController传递进来的。及下面的_tick方法：

  void _tick(Duration elapsed) {
    _lastElapsedDuration = elapsed;
    double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.MICROSECONDS_PER_SECOND;
    _value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
    if (_simulation.isDone(elapsedInSeconds)) {
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.completed :
        AnimationStatus.dismissed;
      stop();
    }
    notifyListeners();
    _checkStatusChanged();
  }

这里应该看的很明白了，AnimationController的_tick会被不停的调用，而AnimationController的值则是由_simulation来根据时间计算得来。接着再调用notifyListeners()和 _checkStatusChanged()通知监听AnimatinController的对象。
Animation的运行原理差不多就是这些，有疑问或对此感兴的可以在我主页中找到我的微信二维码，加我好友，我们慢慢聊。