前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter之通过AnimationController源码分析学习使用Animation

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

作者头像
rhyme_lph
发布2018-09-13 12:57:56
2.2K0
发布2018-09-13 12:57:56
举报
文章被收录于专栏:Flutter&DartFlutter&Dart

涉及到的类有

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

未完待续!!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 涉及到的类有
  • 1. 简介
  • 2. AnimationController
  • 3. Animation
  • 4.揭开AnimationEagerListenerMixin, AnimationLocalListenersMixin,AnimationLocalStatusListenersMixin的面纱
    • 1.AnimationEagerListenerMixin
      • 2.AnimationLocalListenersMixin
        • 3.AnimationLocalStatusListenersMixin
        • 5. Simulation
          • 1. _InterpolationSimulation
            • 2._RepeatingSimulation
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档