Flutter之通过AnimationController源码分析学习使用Animation

涉及到的类有

  • 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;
}

未完待续!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(48):反向运动学(下)

先要复习一下三角函数与余弦定理: 对于直角三角形,三边长a,b,c与三个角A,B,C的关系如下: ? 正弦函数: ? 余弦函数: ? 正切函数: ? 反正切函数...

24410
来自专栏数据小魔方

查询与引用函数——offset函数

今天要跟大家分享的是一个强大的查询与引用函数——offset函数! OFFSET函数的语法参数相对比较多,但是因为参数位置和函数都比较固定,所以只要能够理解各自...

3257
来自专栏游戏杂谈

as3绘制抛物线

一般做页游的过程中,特效的释放可能是不是固定位置的播放,是需要进行“运动的”(其实就是移动特效这个影响剪辑)。举个例子:步兵射箭,不确定箭发射的方向,事先也不...

1062
来自专栏hightopo

HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

1726
来自专栏HansBug's Lab

3359: [Usaco2004 Jan]矩形

3359: [Usaco2004 Jan]矩形 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 8  Solv...

3566
来自专栏Java大联盟

SpringMVC笔记(8):表单标签库

我们为什么要使用Spring MVC表单标签库?一句话,使用它是为了简化代码的开发,提高我们的效率,其实我们使用任何一款框架或者工具都是出于这个目的,实现快速开...

2252
来自专栏GIS讲堂

Arcgis for JS之Cluster聚类分析的实现

在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上...

1803
来自专栏hightopo

HT for Web可视化QuadTree四叉树碰撞检测

1241
来自专栏菩提树下的杨过

sliverlight:按点击移动的连续跑马灯

演示效果如下: 鼠标点击一次,所有方块向左移动一格 ? 思路: 1.利用StoryBoard产生移动,每次点击时,该动画播放一次(即移动一格) 2.关键:动画播...

2036
来自专栏JarvanMo的IT专栏

浅扒Android动态设置字体大小

Android开发中,TextView类的控件应该说是很常用了。一般来说我们是通过android:textSize="20sp" 来设置字体大小,但是很多时候...

1423

扫码关注云+社区

领取腾讯云代金券