Flutter 中的 Animations（一）

劉斯龍發表於2018-08-02
Flutter

官方文件

必要的概念和類

  • Animation 物件，是 Flutter 動畫庫中的核心類，插入用於引導動畫的值
  • Animation 物件知道當前動畫的狀態（如：動畫是否開始，停止，前進或者後退），但對螢幕上顯示的內容一無所知
  • AnimationController 物件管理著 Animation
  • CurvedAnimation 將動畫定義成非線性運動的動畫
  • Tween 在被動畫物件使用的資料範圍之間進行插值。例如，Tween 可能會定義從紅色到藍色或從 0 到 255 的插值
  • 使用 Listeners 和 StatusListeners 來監聽動畫狀態的變化

步驟

  • 初始化一個 AnimationController 物件

    AnimationController controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
複製程式碼

  • 初始化一個 Animation 物件， 並將 AnimationController 作為引數傳遞進去。這裡的 Animation 物件是通過 Tween 物件的 animate 方法建立的

    Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);
複製程式碼

  • 呼叫 AnimationController 的 forward() 方法執行動畫

    controller.forward();
複製程式碼

  • 在 Widget 的 dispose() 方法中呼叫釋放資源

    controller.dispose();
複製程式碼

案例

下面的案例是在給定的時間內改變 widget 的寬高

  • 我們需要實時獲取 Animation 的 value 來賦給 widget 的寬高
  • 要改變 widget 的寬高，那麼就需要 setState(...) 來讓 widget 重繪

首先我們需要一個可以改變狀態的 widget，也就是繼承自 StatefulWidget ，然後按照我們上述的步驟來，程式碼如下：

class AnimateApp extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _AnimateAppState();
  }
}

class _AnimateAppState extends State<AnimateApp> with SingleTickerProviderStateMixin {

  AnimationController controller;
  Animation<double> animation;
  
  @override
  void initState() {
    super.initState();
    // 建立 AnimationController 物件
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 2000));
    // 通過 Tween 物件 建立 Animation 物件
    animation = Tween(begin: 50.0, end: 200.0).animate(controller)
      ..addListener(() {
        // 注意：這句不能少，否則 widget 不會重繪，也就看不到動畫效果
        setState(() {});
      })
    // 執行動畫
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'AnimateApp',
        theme: ThemeData(
            primaryColor: Colors.redAccent
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('AnimateApp'),
            ),
            body: Center(
              child: Container(
                // 獲取動畫的值賦給 widget 的寬高
                width: animation.value,
                height: animation.value,
                decoration: BoxDecoration(
                    color: Colors.redAccent
                ),
              ),
            )
        )
    );
  }

  @override
  void dispose() {
    // 資源釋放
    controller.dispose();
    super.dispose();
  }
}
複製程式碼

效果如下：

Flutter 中的 Animations（一）

可以看出上面的動畫是線性運動的，我們可以通過 CurvedAnimation 來實現非線性運動的動畫程式碼如下：

controller = AnimationController(
    vsync: this, duration: const Duration(milliseconds: 2000));
// 非線性動畫
final CurvedAnimation curve = CurvedAnimation(
    parent: controller, curve: Curves.elasticOut);
animation = Tween(begin: 50.0, end: 200.0).animate(curve)
  ..addListener(() {
    setState(() {});
  });
複製程式碼

效果如下：

Flutter 中的 Animations（一）

然後我們還可以給動畫新增狀態監聽，通過給 Animation 新增 addStatusListener(...) 來監聽當前動畫的狀態，如：動畫是否播放完成。我們可以給上面的例子加一個狀態監聽，讓動畫無限執行：

animation = Tween(begin: 50.0, end: 200.0).animate(curve)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
複製程式碼

AnimationStatus.completed 表示動畫在結束時停止的狀態，這個時候我們讓動畫反向執行（從後往前）；AnimationStatus.dismissed 表示動畫在開始時就停止的狀態，這個時候我們讓動畫正常執行（從前往後）。這樣就可以讓動畫無限執行了。

Flutter 中的 Animations（一）

Tween 還可以接受 Color 型別的引數，實現顏色漸變的效果，下面讓 widget 的顏色從 紅色 漸變到 藍色，部分程式碼如下：

controller = AnimationController(
        duration: const Duration(milliseconds: 3000), vsync: this);
    animation = ColorTween(begin: Colors.redAccent, end: Colors.blue).animate(
        controller)
      ..addListener(() {
        setState(() {});
      });
    controller.forward();
    
...

child: Container(
        decoration: BoxDecoration(
            color: animation.value
        ),
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
        width: 200.0,
      ),
複製程式碼

效果如下：

Flutter 中的 Animations（一）

小提示

with

我們可以看到 _AnimateAppState 類後面跟了一個 with SingleTickerProviderStateMixin，這個 with 什麼意思呢 ？ with 是 Dart 中的一個關鍵字，可以把它理解為 混入（mixin） 。可以看 stackoverflow 上的這個回答。

混入（mixin） 指的是可以將一個或多個類的功能新增到自己的類中，而無需繼承這些類。混入後可以呼叫這些類中的方法。Dart 中沒有多繼承，可以使用 混入（mixin）來避免多重繼承會導致的問題。

上述程式碼中 _AnimateAppState 類 繼承了 State 類，但是初始化 AnimationController 的時候需要一個 TickerProvider 型別的 vsync 引數，所以我們 混入了 TickerProvider 的子類 SingleTickerProviderStateMixin

看一個簡單的混入的小例子

void main() {
  var a = new A();
  a.methodB();
  a.methodC();
  a.methodD();

  new E(a);
}

class A extends B with C, D {
}

class B {
  void methodB() {
    print('Class B methodB is call');
  }
}

class C {
  void methodC() {
    print('Class C methodC is call');
  }
}

class D {
  void methodD() {
    print('Class D methodD is call');
  }
}

class E {
  final C c;

  E(this.c) {
    c.methodC();
  }
}
複製程式碼

可以看出類 A 繼承了類 B，然後 混入 了類 C 和類 D，然後在 main 方法中可以使用類 A 的例項去呼叫 類 B, C, D 中的方法。然後還有類 E，構造方法中需要一個類 C 作為引數，然後因為類 A 混入了類 C，所以可以把類 A 的例項當作引數傳入到類 E 的構造方法中。

執行輸出如下：

Class B methodB is call
Class C methodC is call
Class D methodD is call
Class C methodC is call
複製程式碼

..addListener

在上面的例子中，我們看到了這樣的寫法

animation = Tween(begin: 50.0, end: 200.0).animate(curve)
  ..addListener(() {
    setState(() {});
  });
複製程式碼

注意到 addListener 前面的兩個點號 ..了吧，什麼意思呢？直接看個小例子吧！

void main() {
  List<String> list = getList()
    ..add("android")
    ..add("flutter")
    ..add("kotlin")
    ..removeAt(0);

  list.forEach((item) {
    print(item);
  });

  // ----------等同於

  print('---------------------------');

  List<String> list2 = getList();
  list2.add("android");
  list2.add("flutter");
  list2.add("kotlin");
  list2.removeAt(0);

  list2.forEach((item) {
    print(item);
  });
}

List<String> getList() {
  return new List();
}
複製程式碼

輸入如下：

flutter
kotlin
---------------------------
flutter
kotlin
複製程式碼

如有錯誤，還請指出，謝謝！

相關文章