涉及到的类有

• Animation
  • AnimationController
• _ListenerMixin
  • AnimationEagerListenerMixin
  • AnimationLocalListenersMixin
  • AnimationLocalStatusListenersMixin
• Simulation
  • SpringSimulation
  • _InterpolationSimulation
  • _RepeatingSimulation

1. 简介

界面中，当点击一个按钮，或者切换一个页面，使用动画进行过渡是再普通不过了，而今天，我们来学习一下Flutter的Animation吧！

2. AnimationController

继承关系
Animation > AnimationController

在介绍Animation之前，首先我们看一下AnimationController

// 实现了三个Mixin 分别是eager渴望监听，local本地监听，localStatus本地状态监听
class AnimationController extends Animation<double>
  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {

// value就是当前动画的值
// duration就是持续的时间
// debuglabel 就是用于识别该动画的一个标签
// lowerBound 跟 upperBound就是动画的值最大跟最小值
// vsync 可以理解为提供玩这个动画的门票
  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);
  }

//该构造方法没有最大最小值，所以是无限范围
  AnimationController.unbounded({
    double value = 0.0,
    this.duration,
    this.debugLabel,
    @required TickerProvider vsync,
  }) : assert(value != null),
       assert(vsync != null),
       lowerBound = double.negativeInfinity,//极小
       upperBound = double.infinity,//极大
       _direction = _AnimationDirection.forward {
    _ticker = vsync.createTicker(_tick);
    _internalSetValue(value);
  }
//最小值
  final double lowerBound;
//最大值
  final double upperBound;
//识别该动画的一个标签
  final String debugLabel;

//获取当前对象
  Animation<double> get view => this;
//持续时间
  Duration duration;

//ticket门票
  Ticker _ticker;

//这里用于重新绑定门票
  void resync(TickerProvider vsync) {
    final Ticker oldTicker = _ticker;
    _ticker = vsync.createTicker(_tick);
    _ticker.absorbTicker(oldTicker);
  }

//模拟，这里解释暂定
  Simulation _simulation;

  @override
  double get value => _value;
  double _value;
 
//这里设置值，设置值的时候会暂停动画
  set value(double newValue) {
    assert(newValue != null);
    stop();
    _internalSetValue(newValue);
    notifyListeners();
    _checkStatusChanged();
  }

//重置为最小值
  void reset() {
    value = lowerBound;
  }

//获取当前动画的速度，如果该动画不是进行中，会返回0.0
  double get velocity {
    if (!isAnimating)
      return 0.0;
    return _simulation.dx(lastElapsedDuration.inMicroseconds.toDouble() / Duration.microsecondsPerSecond);
  }
//设置新的值后重新设置状态
  void _internalSetValue(double newValue) {
    _value = newValue.clamp(lowerBound, upperBound);//判断这个值，如果小于lower返回lower，大于upper返回upper
    if (_value == lowerBound) {
      _status = AnimationStatus.dismissed;
    } else if (_value == upperBound) {
      _status = AnimationStatus.completed;
    } else {
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.forward :
        AnimationStatus.reverse;
    }
  }

//动画经过的时间，即是开始到现在，如果结束，返回null
  Duration get lastElapsedDuration => _lastElapsedDuration;
  Duration _lastElapsedDuration;

//动画是否在运动
  bool get isAnimating => _ticker != null && _ticker.isActive;

//动画的方向，前进还是后退
  _AnimationDirection _direction;

//当前动画的状态
  @override
  AnimationStatus get status => _status;
  AnimationStatus _status;

//从from开始向前运动
  TickerFuture forward({ double from }) {
    assert(() {
      if (duration == null) {//如果持续时间为null会抛异常
        throw new FlutterError(
          'AnimationController.forward() called with no default Duration.\n'
          'The "duration" property should be set, either in the constructor or later, before '
          'calling the forward() function.'
        );
      }
      return true;
    }());
//设置状态为向前运动
    _direction = _AnimationDirection.forward;
    if (from != null)
      value = from;//让值等于from
    return _animateToInternal(upperBound);//开始运动到最大值
  }

//同上，方向为返回
  TickerFuture reverse({ double from }) {
    assert(() {
      if (duration == null) {
        throw new FlutterError(
          'AnimationController.reverse() called with no default Duration.\n'
          'The "duration" property should be set, either in the constructor or later, before '
          'calling the reverse() function.'
        );
      }
      return true;
    }());
    _direction = _AnimationDirection.reverse;
    if (from != null)
      value = from;
    return _animateToInternal(lowerBound);
  }

//动画从当前值运行到target目标值
  TickerFuture animateTo(double target, { Duration duration, Curve curve = Curves.linear }) {
    _direction = _AnimationDirection.forward;
    return _animateToInternal(target, duration: duration, curve: curve);
  }
// 插值动画
  TickerFuture _animateToInternal(double target, { Duration duration, Curve curve = Curves.linear }) {
    Duration simulationDuration = duration;
    if (simulationDuration == null) {
      assert(() {
        if (this.duration == null) {
          throw new FlutterError(
            'AnimationController.animateTo() called with no explicit Duration and no default Duration.\n'
            'Either the "duration" argument to the animateTo() method should be provided, or the '
            '"duration" property should be set, either in the constructor or later, before '
            'calling the animateTo() function.'
          );
        }
        return true;
      }());
//获取范围
      final double range = upperBound - lowerBound;
//当前动画还剩多少，百分比|range.isFinite 是否有限，即最大值或最小值是无穷就返回1.0，否则true
      final double remainingFraction = range.isFinite ? (target - _value).abs() / range : 1.0;
//持续时间*百分比，等于剩下的时间，这里duration为null，所以需要计算
      simulationDuration = this.duration * remainingFraction;
    } else if (target == value) {//如果目标值等于当前值，不运动
      // Already at target, don't animate.
      simulationDuration = Duration.zero;
    }
//先停止之前的动画
    stop();
    if (simulationDuration == Duration.zero) {//如果时间为0
      if (value != target) {//当前值不等于目标值
        _value = target.clamp(lowerBound, upperBound);//判断目标值是否超过最大跟最小，然后赋值
        notifyListeners();//刷新监听
      }
//设置状态
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.completed ://完成upper
        AnimationStatus.dismissed;//取消lower
      _checkStatusChanged();//检查值改变
      return new TickerFuture.complete();//返回已经完成
    }
    assert(simulationDuration > Duration.zero);//判断时间是否大于0
    assert(!isAnimating);//判断是否不运动
    return _startSimulation(new _InterpolationSimulation(_value, target, simulationDuration, curve));//这里开始了屏幕的运动
  }
//重复动画驱动，最大值，最小值，跟持续时间，可以实现永远不会完成的动画
  TickerFuture repeat({ double min, double max, Duration period }) {
    min ??= lowerBound;
    max ??= upperBound;
    period ??= duration;
    assert(() {
      if (period == null) {
        throw new FlutterError(
          'AnimationController.repeat() called without an explicit period and with no default Duration.\n'
          'Either the "period" argument to the repeat() method should be provided, or the '
          '"duration" property should be set, either in the constructor or later, before '
          'calling the repeat() function.'
        );
      }
      return true;
    }());
    return animateWith(new _RepeatingSimulation(min, max, period));
  }

//临界阻尼动画
//动画速度默认为1.0
  TickerFuture fling({ double velocity = 1.0 }) {
//判断方向
    _direction = velocity < 0.0 ? _AnimationDirection.reverse : _AnimationDirection.forward;
//目标值，当速度小于0的时候，方向为后退，targer为lowerBound的误差值，因为速度改变了，会出现误差
    final double target = velocity < 0.0 ? lowerBound - _kFlingTolerance.distance
                                         : upperBound + _kFlingTolerance.distance;
  //弹簧模拟|_kFlingSpringDescription为一个定制好的弹簧参数
    final Simulation simulation = new SpringSimulation(_kFlingSpringDescription, value, target, velocity)
      ..tolerance = _kFlingTolerance;//这里设置误差进去
    return animateWith(simulation);
  }
//设置模拟
  TickerFuture animateWith(Simulation simulation) {
    stop();
    return _startSimulation(simulation);
  }
//开始模拟动画
  TickerFuture _startSimulation(Simulation simulation) {
    assert(simulation != null);
    assert(!isAnimating);
//初始化值
    _simulation = simulation;
    _lastElapsedDuration = Duration.zero;
    _value = simulation.x(0.0).clamp(lowerBound, upperBound);
//门票开始
    final Future<Null> result = _ticker.start();
//根据方向设置状态
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.forward :
      AnimationStatus.reverse;
    _checkStatusChanged();
    return result;
  }

//停止动画
  void stop({ bool canceled = true }) {
    _simulation = null;
    _lastElapsedDuration = null;
    _ticker.stop(canceled: canceled);
  }

//销毁动画
  @override
  void dispose() {
    assert(() {
      if (_ticker == null) {
        throw new FlutterError(
          'AnimationController.dispose() called more than once.\n'
          'A given $runtimeType cannot be disposed more than once.\n'
          'The following $runtimeType object was disposed multiple times:\n'
          '  $this'
        );
      }
      return true;
    }());
//门票撕掉
    _ticker.dispose();
    _ticker = null;
    super.dispose();
  }

//最后一次的状态
  AnimationStatus _lastReportedStatus = AnimationStatus.dismissed;
//更新最后一次状态
  void _checkStatusChanged() {
    final AnimationStatus newStatus = status;
    if (_lastReportedStatus != newStatus) {
      _lastReportedStatus = newStatus;
      notifyStatusListeners(newStatus);
    }
  }

//传入经过的时间，这里未使用，功效未名
  void _tick(Duration elapsed) {
    _lastElapsedDuration = elapsed;
//返回经过多少秒
    final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;
    assert(elapsedInSeconds >= 0.0);
//获取动画值
    _value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
//模拟动画是否完成
    if (_simulation.isDone(elapsedInSeconds)) {
      _status = (_direction == _AnimationDirection.forward) ?
        AnimationStatus.completed :
        AnimationStatus.dismissed;
      stop(canceled: false);
    }
    notifyListeners();
    _checkStatusChanged();
  }

  @override
  String toStringDetails() {
    final String paused = isAnimating ? '' : '; paused';
    final String ticker = _ticker == null ? '; DISPOSED' : (_ticker.muted ? '; silenced' : '');
    final String label = debugLabel == null ? '' : '; for $debugLabel';
    final String more = '${super.toStringDetails()} ${value.toStringAsFixed(3)}';
    return '$more$paused$ticker$label';
  }
}

好了，有没有人看完这段我加了注释的AnimationController源码呢？如果看完的话，大概对Animaiton这个类已经了解了，现在让我们试着去继承Animation吧!

3. Animation

下面这段代码继承了Animation，可以发现需要重写两个监听的添加和移除，跟AnimationController有很大的出入，相同的只有 get status 跟 get value

class MyAnimationController extends Animation<double>{
  @override
  void addListener(listener) {
    // TODO: 添加监听
  }
  @override
  void addStatusListener(AnimationStatusListener listener) {
    // TODO: 添加状态监听
  }
  @override
  void removeListener(listener) {
    // TODO: 移除监听
  }
  @override
  void removeStatusListener(AnimationStatusListener listener) {
    // TODO: 移除状态监听
  }
  // TODO: 当前状态
  @override
  AnimationStatus get status => null;
  // TODO: 当前值
  @override
  double get value => null;
}

4.揭开AnimationEagerListenerMixin， AnimationLocalListenersMixin，AnimationLocalStatusListenersMixin的面纱

1.AnimationEagerListenerMixin

继承关系
_ListenerMixin > AnimationEagerListenerMixin

他实际上就是一个抽象类，在dart里面抽象类可继承可实现，看源码知道，他主要的一个方法就是dispose,用于规定释放资源的方法

///释放此对象使用的资源。 该对象不再可用
///调用此方法后
  @mustCallSuper //该注解表示一定要调用super.dispose();
  void dispose() { }

2.AnimationLocalListenersMixin

继承关系
_ListenerMixin > AnimationLocalListenersMixin

也是一个抽象类，但是该抽象类有自己的方法体，定义了一个_listeners，用于存放listener，该list是一个观察者list

abstract class AnimationLocalListenersMixin extends _ListenerMixin {

  factory AnimationLocalListenersMixin._() => null;

  final ObserverList<VoidCallback> _listeners = new ObserverList<VoidCallback>();

//添加监听到list
  void addListener(VoidCallback listener) {
    didRegisterListener();
    _listeners.add(listener);
  }

//在list中移除监听
  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
    didUnregisterListener();
  }

//通知所有的监听器
  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) {
        FlutterError.reportError(new FlutterErrorDetails(
          exception: exception,
          stack: stack,
          library: 'animation library',
          context: 'while notifying listeners for $runtimeType',
          informationCollector: (StringBuffer information) {
            information.writeln('The $runtimeType notifying listeners was:');
            information.write('  $this');
          }
        ));
      }
    }
  }
}

3.AnimationLocalStatusListenersMixin

继承关系
_ListenerMixin > AnimationLocalListenersMixin

可以看出，这个抽象类跟AnimationLocalListenersMixin类似，只不过该抽象类负责跟status打交道，这里就不解析了

5. Simulation

该类主要定制动画的运行过程，可以说相当于Android中的动画插值器

abstract class Simulation {
  Simulation({ this.tolerance = Tolerance.defaultTolerance });
//当前的位置
  double x(double time);
//当前的速度
  double dx(double time);
//是否完成
  bool isDone(double time);
//用于模糊的最大值跟最小值，接近某个值后算完成
  Tolerance tolerance;
}

先来看一下_InterpolationSimulation这个类

1. _InterpolationSimulation

class _InterpolationSimulation extends Simulation {
  _InterpolationSimulation(this._begin, this._end, Duration duration, this._curve)
    : assert(_begin != null),
      assert(_end != null),
      assert(duration != null && duration.inMicroseconds > 0),
      _durationInSeconds = duration.inMicroseconds / Duration.microsecondsPerSecond;
  final double _durationInSeconds;
  final double _begin;
  final double _end;
  final Curve _curve;
  @override
  double x(double timeInSeconds) {
//这里的动画使用秒为单位，返回当前进度
    final double t = (timeInSeconds / _durationInSeconds).clamp(0.0, 1.0);
//如果为开始就返回开始位置
    if (t == 0.0)
      return _begin;
//如果为结束就返回结束位置
    else if (t == 1.0)
      return _end;
//返回当前位置 （开始+(结束-开始)*变化速率(进度)）
    else
      return _begin + (_end - _begin) * _curve.transform(t);
  }
  @override
  double dx(double timeInSeconds) {
// 时间容差
    final double epsilon = tolerance.time;
//获取到速率，可以计算得到为x  -_-!!
    return (x(timeInSeconds + epsilon) - x(timeInSeconds - epsilon)) / (2 * epsilon);
  }
  @override//判断当前时间是否大于约定时间为完成
  bool isDone(double timeInSeconds) => timeInSeconds > _durationInSeconds;
}

上面动画从源码得知，是一个匀加速的动画效果

2._RepeatingSimulation

class _RepeatingSimulation extends Simulation {
  _RepeatingSimulation(this.min, this.max, Duration period)
    : _periodInSeconds = period.inMicroseconds / Duration.microsecondsPerSecond {
    assert(_periodInSeconds > 0.0);
  }
  final double min;
  final double max;
  final double _periodInSeconds;//时间/秒
  @override
  double x(double timeInSeconds) {
    assert(timeInSeconds >= 0.0);//时间需要大于0
    final double t = (timeInSeconds / _periodInSeconds) % 1.0;
//在两个数字之间进行线性插值
    return ui.lerpDouble(min, max, t);
  }
  @override//线性运动
  double dx(double timeInSeconds) => (max - min) / _periodInSeconds;
  @override
  bool isDone(double timeInSeconds) => false;
}

未完待续！！