Flutter 中的 Animations（三）

時間 2019-11-24

標籤 flutter animations 简体版

原文原文鏈接

若是沒有看過以前兩節的，建議先看看前兩節的內容post

上一節中咱們主要作的事情以下：

在 Animation 的 addListener(...) 中調用 setState(...) 來給 widget 添加動畫
使用 AnimatedWidget 的方法來給 widget 添加動畫

上一節中咱們也經過案例的形式展示出以上兩種方式的區別，得出的結論就是以下：使用 addListener(...) 和 setState(...) 給 Widget 添加動畫的時候，會致使其餘的 Widget 也跟着重繪，而使用 AnimatedWidget 的方式給 Widget 添加動畫的時候只會重繪當前的 Widget動畫

這是爲何呢？？？

咱們先來看看動畫的執行流程。ui

咱們在使用動畫的時候會初始化一個 AnimationControllerthis

AnimationController controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
複製代碼

能夠看出，初始化 AnimationController 須要傳遞兩個參數，一個是 vsync 一個是 duration ，這個 duration 很容易理解，就是動畫執行完畢須要的時長，那 vsync 是什麼啊？上述代碼中咱們傳入了 this ，那是由於咱們在 State 類 with（混入，第一節有講） 了 SingleTickerProviderStateMixin，下面咱們看看初始化 AnimationController 時都幹了什麼事，源碼以下：spa

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);
  }
複製代碼

咱們抽重點出來看debug

_ticker = vsync.createTicker(_tick);
複製代碼

這裏調用了 vsync 的 createTicker(...) 方法建立了一個 Ticker，而咱們在初始化 AnimationController 的時候 vsync 參數傳的是 SingleTickerProviderStateMixin，SingleTickerProviderStateMixin#createTicker(...) 的源碼以下：code

Ticker createTicker(TickerCallback onTick) {

    ...
    
    _ticker = new Ticker(onTick, debugLabel: 'created by $this');
    
    ...
    
    return _ticker;
  }
複製代碼

這個 Ticker 是個什麼東西呢？看看它的註釋吧！如下爲 Ticker 類的部分註釋對象

Calls its callback once per animation frame.繼承

When created, a ticker is initially disabled. Call [start] to enable the ticker.

Creates a ticker that will call the provided callback once per frame while running.

第一句的大概意思就是 Ticker 類在每一幀動畫中都會調用他本身的回調一次
第二句的大概意思就是 當 Ticker 被建立以後，默認是不可用（disabled）的，能夠調用 start 方法來使 Ticker 變得可用（enable）
第三句的大概意思就是 建立一個 Ticker，他將在運行時的每一幀都會調用一次所提供的回調

建立 Ticker 到這兒就完了。如何讓Ticker可用呢，也就是如何調用它的 start 方法呢？

咱們在啓動動畫的時候會調用 AnimationController#forward() ，在 forward() 方法中就間接的會調用到 Ticker#start()， Ticker#start() 最後會調用到 scheduleFrame() ，而這個方法裏面調用了 ui.window.scheduleFrame(); ，這個 scheduleFrame() 是一個 Native 方法，以下：

void scheduleFrame() native 'Window_scheduleFrame';
複製代碼

上面的方法應該就是調度屏幕刷新的（若有錯誤，請指出，謝謝）。

到這裏，Ticker 也就 start 了，而後 Ticker 就會在動畫的每一幀去調一次本身的回調，這個回調是在 AnimationController 中的構造方法中建立 Ticker 的時候傳入的 _ticker = vsync.createTicker(_tick);

咱們來看看 _tick 部分源碼：

void _tick(Duration elapsed) {
    
    ...
    
    notifyListeners();
    _checkStatusChanged();
  }
複製代碼

這裏面調用了 notifyListeners() 和 _checkStatusChanged()，咱們先來看看 notifyListeners()，部分源碼以下：

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) {
        ...
      }
    }
  }
複製代碼

能夠看出，notifyListeners() 中有一個 VoidCallback 的集合，而後遍歷這個集合，而且執行集合中全部的回調。

一般咱們會使用 .addListener((){...}) 給動畫添加監聽，咱們在調用addListener((){...})以後會執行以下源碼

void addListener(VoidCallback listener) {
    didRegisterListener();
    _listeners.add(listener);
  }
複製代碼

將咱們傳入的回調方法添加到_listeners集合中，也就是上面 notifyListeners() 方法中遍歷的集合。

這裏咱們來小結一下動畫的執行流程

建立動畫
- 建立 Ticker，並 傳入回調，回調裏面會執行 notifyListeners() 方法，此方法中會去遍歷_listeners集合，並執行集合中的每個回調方法
給動畫添加監聽
- 這裏監聽時傳入的回調會被添加到 _listeners 集合中去
啓動動畫
- 會調用 ticker.srtart() 來啓動 Ticker，而後 Ticker 在動畫的每一幀都會 執行回調，也就是咱們在第一步中傳入的

接下來就是咱們在 addListener((){...}) 中乾的事情了，一般會這樣

_controller.addListener(() {
      setState(() {

      });
    });
複製代碼

也就是咱們會在傳入的回調方法中去執行 setState((){}) 方法，咱們能夠看看文檔：

setState(VoidCallback fn) 部分文檔以下：

Notify the framework that the internal state of this object has changed.

Calling [setState] notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a [build] for this [State] object.

大概意思就是：通知 framework 當前對象的內部狀態發生改變，這個操做會致使再次調用當前 State 對象的 build 方法，至關於重繪當前對象。

結合以前的分析，整個動畫過程就是，當動畫啓動以後，會不停的去執行addListener((){...})中的回調，而咱們在監聽回調中又調用了setState(...)方法，因此這就致使當前對象不停的重繪，也就出現了屏幕上的動畫的效果。

回到以前的問題： 使用 addListener(...) 和 AnimatedWidget 爲何會出現那種區別呢？

其實咱們來看下 AnimatedWidget 的源碼立馬就明白了

abstract class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({
    Key key,
    @required this.listenable
  }) : assert(listenable != null),
       super(key: key);
       
  final Listenable listenable;


  @protected
  Widget build(BuildContext context);

  @override
  _AnimatedState createState() => new _AnimatedState();
  
  ...
  
}
複製代碼

咱們能夠看到 AnimatedWidget 繼承自 StatefulWidget，而 StateFulWidget 在初始化的時候會去建立一個 State 對象來管理自身的狀態，也就是回去執行 createState() 方法。

其實到這裏已經能夠解釋兩種動畫方式存在的區別，由於 AnimatedWidget 內部也有一個 State 對象來管理這自身的狀態，而咱們以前經過查看文檔也知道一個 State 對象只會維護當前對象的狀態，因此即便重繪，也只會致使當前 State 對象的重繪，而不會致使其餘 State 對象的重繪。

咱們來繼續看看 AnimatedWidget 中的 createState() 幹了什麼事，它裏面調用了_AnimatedState() 方法，部分源碼以下：

class _AnimatedState extends State<AnimatedWidget> {
  @override
  void initState() {
    super.initState();
    widget.listenable.addListener(_handleChange);
  }

...

  @override
  void dispose() {
    widget.listenable.removeListener(_handleChange);
    super.dispose();
  }

  void _handleChange() {
    setState(() {
      // The listenable's state is our build state, and it changed already.
    });
  }

  @override
  Widget build(BuildContext context) => widget.build(context);
複製代碼