基于Flutter 1.5，從源碼視角來深入剖析flutter動(dòng)畫原理芙沥，相關(guān)源碼目錄見文末附錄

一诲祸、概述

動(dòng)畫效果對(duì)于系統(tǒng)的用戶體驗(yàn)非常重要，好的動(dòng)畫能讓用戶感覺界面更加順暢而昨，提升用戶體驗(yàn)救氯。

1.1 動(dòng)畫類型

Flutter動(dòng)畫大的分類來說主要分為兩大類：

• 補(bǔ)間動(dòng)畫：給定初值與終值，系統(tǒng)自動(dòng)補(bǔ)齊中間幀的動(dòng)畫
• 物理動(dòng)畫：遵循物理學(xué)定律的動(dòng)畫歌憨，實(shí)現(xiàn)了彈簧着憨、阻尼、重力三種物理效果

在應(yīng)用使用過程中常見動(dòng)畫模式：

• 動(dòng)畫列表或者網(wǎng)格：例如元素的添加或者刪除操作务嫡；
• 轉(zhuǎn)場動(dòng)畫Shared element transition：例如從當(dāng)前頁面打開另一頁面的過渡動(dòng)畫甲抖；
• 交錯(cuò)動(dòng)畫Staggered animations：比如部分或者完全交錯(cuò)的動(dòng)畫。

1.2 類圖

核心類：

• Animation對(duì)象是整個(gè)動(dòng)畫中非常核心的一個(gè)類心铃；
• AnimationController用于管理Animation准谚；
• CurvedAnimation過程是非線性曲線；
• Tween補(bǔ)間動(dòng)畫
• Listeners和StatusListeners用于監(jiān)聽動(dòng)畫狀態(tài)改變于个。

AnimationStatus是枚舉類型氛魁，有4個(gè)值；

1.3 動(dòng)畫實(shí)例

 //[見小節(jié)2.1]
AnimationController animationController = AnimationController(
    vsync: this, duration: Duration(milliseconds: 1000));
Animation animation = Tween(begin: 0.0,end: 10.0).animate(animationController);
animationController.addListener(() {
  setState(() {});
});
 //[見小節(jié)2.2]
animationController.forward();

該過程說明：

• AnimationController作為Animation子類秀存，在屏幕刷新時(shí)生成一系列值捶码，默認(rèn)情況下從0到1區(qū)間的取值。
• Tween的animate()方法來自于父類Animatable或链，該方法返回的對(duì)象類型為_AnimatedEvaluation惫恼，而該對(duì)象最核心的工作就是通過value來調(diào)用Tween的transform()；

調(diào)用鏈：

AnimationController.forward
  AnimationController.\_animateToInternal
    AnimationController.\_startSimulation
      Ticker.start()
        Ticker.scheduleTick()
          SchedulerBinding.scheduleFrameCallback()
            SchedulerBinding.scheduleFrame()
              ...
                Ticker.\_tick
                  AnimationController.\_tick
                  Ticker.scheduleTick

二澳盐、原理分析

2.1 AnimationController初始化

[-> lib/src/animation/animation_controller.dart]

AnimationController({
  double value,
  this.duration,
  this.debugLabel,
  this.lowerBound = 0.0,
  this.upperBound = 1.0,
  this.animationBehavior = AnimationBehavior.normal,
  @required TickerProvider vsync,
}) : _direction = _AnimationDirection.forward {
  _ticker = vsync.createTicker(_tick);  //[見小節(jié)2.1.1]
  _internalSetValue(value ?? lowerBound); //[見小節(jié)2.1.3]
}

該方法說明：

• AnimationController初始化過程祈纯，一般都設(shè)置duration和vsync初值；
• upperBound(上邊界值)和lowerBound(下邊界值)都不能為空叼耙，且upperBound必須大于等于lowerBound腕窥；
• 創(chuàng)建默認(rèn)的動(dòng)畫方向?yàn)橄蚯?_AnimationDirection.forward)；
• 調(diào)用類型為TickerProvider的vsync對(duì)象的createTicker()方法來創(chuàng)建Ticker對(duì)象筛婉；

TickerProvider作為抽象類簇爆，主要的子類有SingleTickerProviderStateMixin和TickerProviderStateMixin，這兩個(gè)類的區(qū)別就是是否支持創(chuàng)建多個(gè)TickerProvider爽撒，這里SingleTickerProviderStateMixin為例展開入蛆。

2.1.1 createTicker

[-> lib/src/widgets/ticker_provider.dart]

mixin SingleTickerProviderStateMixin<T extends StatefulWidget> on State<T> implements TickerProvider {
  Ticker _ticker;

  Ticker createTicker(TickerCallback onTick) {
     //[見小節(jié)2.1.2]
    _ticker = Ticker(onTick, debugLabel: 'created by $this');
    return _ticker;
  }

2.1.2 Ticker初始化

[-> lib/src/scheduler/ticker.dart]

class Ticker {
  Ticker(this._onTick, { this.debugLabel }) {
  }  

  final TickerCallback _onTick;
}

將AnimationControllerd對(duì)象中的_tick()方法，賦值給Ticker對(duì)象的_onTick成員變量硕勿，再來看看該_tick方法哨毁。

2.1.3 _internalSetValue

[-> lib/src/animation/animation_controller.dart ::AnimationController]

void _internalSetValue(double newValue) {
  _value = newValue.clamp(lowerBound, upperBound);
  if (_value == lowerBound) {
    _status = AnimationStatus.dismissed;
  } else if (_value == upperBound) {
    _status = AnimationStatus.completed;
  } else {
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.forward :
      AnimationStatus.reverse;
  }
}

根據(jù)當(dāng)前的value值來初始化動(dòng)畫狀態(tài)_status

2.2 forward

[-> lib/src/animation/animation_controller.dart ::AnimationController]

TickerFuture forward({ double from }) {
  //默認(rèn)采用向前的動(dòng)畫方向
  _direction = _AnimationDirection.forward;
  if (from != null)
    value = from;
  return _animateToInternal(upperBound); //[見小節(jié)2.3]
}

_AnimationDirection是枚舉類型，有forward(向前)和reverse(向后)兩個(gè)值源武，也就是說該方法的功能是指從from開始向前滑動(dòng)扼褪，

2.3 _animateToInternal

[-> lib/src/animation/animation_controller.dart ::AnimationController]

TickerFuture _animateToInternal(double target, { Duration duration, Curve curve = Curves.linear }) {
  double scale = 1.0;
  if (SemanticsBinding.instance.disableAnimations) {
    switch (animationBehavior) {
      case AnimationBehavior.normal:
        scale = 0.05;
        break;
      case AnimationBehavior.preserve:
        break;
    }
  }
  Duration simulationDuration = duration;
  if (simulationDuration == null) {
    final double range = upperBound - lowerBound;
    final double remainingFraction = range.isFinite ? (target - _value).abs() / range : 1.0;
    //根據(jù)剩余動(dòng)畫的百分比來評(píng)估仿真動(dòng)畫剩余時(shí)長
    simulationDuration = this.duration * remainingFraction;
  } else if (target == value) {
    //已到達(dá)動(dòng)畫終點(diǎn)，不再執(zhí)行動(dòng)畫
    simulationDuration = Duration.zero;
  }
  //停止老的動(dòng)畫[見小節(jié)2.3.1]
  stop();
  if (simulationDuration == Duration.zero) {
    if (value != target) {
      _value = target.clamp(lowerBound, upperBound);
      notifyListeners();
    }
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.completed :
      AnimationStatus.dismissed;
    _checkStatusChanged();
    //當(dāng)動(dòng)畫執(zhí)行時(shí)間已到软能，則直接結(jié)束
    return TickerFuture.complete();
  }
  //[見小節(jié)2.4]
  return _startSimulation(_InterpolationSimulation(_value, target, simulationDuration, curve, scale));
}

默認(rèn)采用的是線性動(dòng)畫曲線Curves.linear迎捺。

2.3.1 AnimationController.stop

void stop({ bool canceled = true }) {
  _simulation = null;
  _lastElapsedDuration = null;
  //[見小節(jié)2.3.2]
  _ticker.stop(canceled: canceled);
}

2.3.2 Ticker.stop

[-> lib/src/scheduler/ticker.dart]

void stop({ bool canceled = false }) {
  if (!isActive) //已經(jīng)不活躍举畸，則直接返回
    return;

  final TickerFuture localFuture = _future;
  _future = null;
  _startTime = null;

  //[見小節(jié)2.3.3]
  unscheduleTick();
  if (canceled) {
    localFuture._cancel(this);
  } else {
    localFuture._complete();
  }
}

2.3.3 Ticker.unscheduleTick

[-> lib/src/scheduler/ticker.dart]

void unscheduleTick() {
  if (scheduled) {
    SchedulerBinding.instance.cancelFrameCallbackWithId(_animationId);
    _animationId = null;
  }
}

2.3.4 _InterpolationSimulation初始化

[-> lib/src/animation/animation_controller.dart ::_InterpolationSimulation]

class _InterpolationSimulation extends Simulation {
  _InterpolationSimulation(this._begin, this._end, Duration duration, this._curve, double scale)
    : _durationInSeconds = (duration.inMicroseconds * scale) / Duration.microsecondsPerSecond;

  final double _durationInSeconds;
  final double _begin;
  final double _end;
  final Curve _curve;
}

該方法創(chuàng)建插值模擬器對(duì)象查排，并初始化起點(diǎn)、終點(diǎn)抄沮、動(dòng)畫曲線以及時(shí)長跋核。這里用的Curve是線性模型，也就是說采用的是勻速運(yùn)動(dòng)叛买。

2.4 _startSimulation

[-> lib/src/animation/animation_controller.dart]

TickerFuture _startSimulation(Simulation simulation) {
  _simulation = simulation;
  _lastElapsedDuration = Duration.zero;
  _value = simulation.x(0.0).clamp(lowerBound, upperBound);
  //[見小節(jié)2.5]
  final TickerFuture result = _ticker.start();
  _status = (_direction == _AnimationDirection.forward) ?
    AnimationStatus.forward :
    AnimationStatus.reverse;
  //[見小節(jié)2.4.1]
  _checkStatusChanged();
  return result;
}

2.4.1 _checkStatusChanged

[-> lib/src/animation/animation_controller.dart]

void _checkStatusChanged() {
  final AnimationStatus newStatus = status;
  if (_lastReportedStatus != newStatus) {
    _lastReportedStatus = newStatus;
    notifyStatusListeners(newStatus); //通知狀態(tài)改變
  }
}

這里會(huì)回調(diào)_statusListeners中的所有狀態(tài)監(jiān)聽器砂代，這里的狀態(tài)就是指AnimationStatus的dismissed、forward率挣、reverse以及completed刻伊。

2.5 Ticker.start

[-> lib/src/scheduler/ticker.dart]

TickerFuture start() {
  _future = TickerFuture._();
  if (shouldScheduleTick) {
    scheduleTick();   //[見小節(jié)2.6]
  }
  if (SchedulerBinding.instance.schedulerPhase.index > SchedulerPhase.idle.index &&
      SchedulerBinding.instance.schedulerPhase.index < SchedulerPhase.postFrameCallbacks.index)
    _startTime = SchedulerBinding.instance.currentFrameTimeStamp;
  return _future;
}

此處的shouldScheduleTick等于!muted && isActive && !scheduled，也就是沒有調(diào)度過的活躍狀態(tài)才會(huì)調(diào)用Tick。

2.6 Ticker.scheduleTick

[-> lib/src/scheduler/ticker.dart]

void scheduleTick({ bool rescheduling = false }) {
  //[見小節(jié)2.7]
  _animationId = SchedulerBinding.instance.scheduleFrameCallback(_tick, rescheduling: rescheduling);
}

此處的_tick會(huì)在下一次vysnc觸發(fā)時(shí)回調(diào)執(zhí)行捶箱，見小節(jié)2.10智什。

2.7 scheduleFrameCallback

[-> lib/src/scheduler/binding.dart]

int scheduleFrameCallback(FrameCallback callback, { bool rescheduling = false }) {
    //[見小節(jié)2.8]
  scheduleFrame();
  _nextFrameCallbackId += 1;
  _transientCallbacks[_nextFrameCallbackId] = _FrameCallbackEntry(callback, rescheduling: rescheduling);
  return _nextFrameCallbackId;
}

將前面?zhèn)鬟f過來的Ticker._tick()方法保存在_FrameCallbackEntry的callback中，然后將_FrameCallbackEntry記錄在Map類型的_transientCallbacks丁屎，

2.8 scheduleFrame

[-> lib/src/scheduler/binding.dart]

void scheduleFrame() {
  if (_hasScheduledFrame || !_framesEnabled)
    return;
  ui.window.scheduleFrame();
  _hasScheduledFrame = true;
}

從文章Flutter之setState更新機(jī)制荠锭，可知此處調(diào)用的ui.window.scheduleFrame()，會(huì)注冊(cè)vsync監(jiān)聽晨川。當(dāng)當(dāng)下一次vsync信號(hào)的到來時(shí)會(huì)執(zhí)行handleBeginFrame()证九。

2.9 handleBeginFrame

[-> lib/src/scheduler/binding.dart:: SchedulerBinding]

void handleBeginFrame(Duration rawTimeStamp) {
  Timeline.startSync('Frame', arguments: timelineWhitelistArguments);
  _firstRawTimeStampInEpoch ??= rawTimeStamp;
  _currentFrameTimeStamp = _adjustForEpoch(rawTimeStamp ?? _lastRawTimeStamp);
  if (rawTimeStamp != null)
    _lastRawTimeStamp = rawTimeStamp;
  ...

  //此時(shí)階段等于SchedulerPhase.idle;
  _hasScheduledFrame = false;
  try {
    Timeline.startSync('Animate', arguments: timelineWhitelistArguments);
    _schedulerPhase = SchedulerPhase.transientCallbacks;
    //執(zhí)行動(dòng)畫的回調(diào)方法
    final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;
    _transientCallbacks = <int, _FrameCallbackEntry>{};
    callbacks.forEach((int id, _FrameCallbackEntry callbackEntry) {
      if (!_removedIds.contains(id))
        _invokeFrameCallback(callbackEntry.callback, _currentFrameTimeStamp, callbackEntry.debugStack);
    });
    _removedIds.clear();
  } finally {
    _schedulerPhase = SchedulerPhase.midFrameMicrotasks;
  }
}

該方法主要功能是遍歷_transientCallbacks，從前面小節(jié)[2.7]共虑，可知該過程會(huì)執(zhí)行Ticker._tick()方法愧怜。

2.10 Ticker._tick

[-> lib/src/scheduler/ticker.dart]

void _tick(Duration timeStamp) {
  _animationId = null;
  _startTime ??= timeStamp;
  //[見小節(jié)2.11]
  _onTick(timeStamp - _startTime);
  //根據(jù)活躍狀態(tài)來決定是否再次調(diào)度
  if (shouldScheduleTick)
    scheduleTick(rescheduling: true);
}

該方法主要功能：

• 小節(jié)[2.1.2]的Ticker初始化中，可知此處_onTick便是AnimationController的_tick()方法妈拌；
• 小節(jié)[2.5]已介紹當(dāng)仍處于活躍狀態(tài)叫搁，則會(huì)再次調(diào)度，回到小節(jié)[2.6]的scheduleTick()供炎，從而形成動(dòng)畫的連續(xù)繪制過程渴逻。

2.11 AnimationController._tick

[-> lib/src/animation/animation_controller.dart]

void _tick(Duration elapsed) {
  _lastElapsedDuration = elapsed;
  //獲取已過去的時(shí)長
  final double elapsedInSeconds = elapsed.inMicroseconds.toDouble() / Duration.microsecondsPerSecond;
  _value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
  if (_simulation.isDone(elapsedInSeconds)) {
    _status = (_direction == _AnimationDirection.forward) ?
      AnimationStatus.completed :
      AnimationStatus.dismissed;
    stop(canceled: false); //當(dāng)動(dòng)畫已完成，則停止
  }
  notifyListeners();   //通知監(jiān)聽器[見小節(jié)2.11.1]
  _checkStatusChanged(); //通知狀態(tài)監(jiān)聽器[見小節(jié)2.11.2]
}

2.11.1 notifyListeners

[-> lib/src/animation/listener_helpers.dart ::AnimationLocalListenersMixin]

void notifyListeners() {
  final List<VoidCallback> localListeners = List<VoidCallback>.from(_listeners);
  for (VoidCallback listener in localListeners) {
    try {
      if (_listeners.contains(listener))
        listener();
    } catch (exception, stack) {
      ...
    }
  }
}

AnimationLocalListenersMixin的addListener()會(huì)向_listeners中添加監(jiān)聽器

2.11.2 _checkStatusChanged

[-> lib/src/animation/listener_helpers.dart ::AnimationLocalStatusListenersMixin]

void notifyStatusListeners(AnimationStatus status) {
  final List<AnimationStatusListener> localListeners = List<AnimationStatusListener>.from(_statusListeners);
  for (AnimationStatusListener listener in localListeners) {
    try {
      if (_statusListeners.contains(listener))
        listener(status);
    } catch (exception, stack) {
      ...
    }
  }
}

從前面的小節(jié)[2.4.1]可知音诫，當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用notifyStatusListeners方法惨奕。AnimationLocalStatusListenersMixin的addStatusListener()會(huì)向_statusListeners添加狀態(tài)監(jiān)聽器。

三竭钝、總結(jié)

3.1 動(dòng)畫流程圖

image.png

本文轉(zhuǎn)自 http://gityuan.com/2019/07/13/flutter_animator/梨撞，如有侵權(quán)，請(qǐng)聯(lián)系刪除香罐。