Flutter學習之旅（四）Flutter動畫（1）動畫基礎介紹
前言
本篇將介紹Flutter中動畫。首先來看下Flutter的動畫基礎概念和相關類
Animation：Flutter中動畫的核心類 AnimationController：動畫管理類 Tween：補間物件，用於計算動畫使用的資料範圍之間的插值。 Listeners和StatusListeners：用於監聽動畫狀態改變 CurvedAnimation：用於定義非線性曲線動畫
1. Animation介紹
Flutter中的動畫核心類，我們可以理解為Animation是Flutter中動畫的基類。它是個抽象類（abstract），所以不能夠直接建立其物件來使用動畫。Animation物件可以在設定的動畫執行時間內生成在兩個值之間生成插值數。Animation物件的輸出可以是線性，非線性。
一種常用的動畫型別是Animation，當然還有可能是double之外的其資料型別，例如Animation 或Animation 。
2. CurvedAnimation非線性動畫
CurvedAnimation繼承Animation，構建其物件的方式是：
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); 1 建構函式中傳入控制器和要執行的曲線方式。這裡不做過多的介紹。
3. AnimationController動畫管理類
AnimationController是一個特殊的Animation物件。其繼承自Animation ，因此可以在需要Animation物件的任何地方使用它。預設情況下，AnimationController在給定的持續時間內線性生成從0.0到1.0的值。
AnimationController controller = new AnimationController( duration: const Duration(milliseconds: 2000), vsync: this); 上述是AnimationController 物件的建立方式，建構函式第一個引數是動畫執行的時間，第二個vsync傳入是防止動畫離屏之後繼續消耗資源。AnimationController 提供了幾個常用的方法。
<!--開始動畫，從開始值向結束值--> TickerFuture forward({ double from }) {}
<!--開始反向執行此動畫--> TickerFuture reverse({ double from }) {}
<!--開始執行動畫，結束後重新啟動--> TickerFuture repeat({ double min, double max, Duration period }) {}
<!--使用阻尼效果驅動動畫--> TickerFuture fling({ double velocity: 1.0 }) {}
<!--停止動畫--> void stop({ bool canceled: true }) {}
<!--釋放此物件使用的資源,此方法呼叫後不再控制器物件不再可用--> void dispose() {}
4. Tween補間值生成類
AnimationController物件的範圍為0.0到1.0。如果需要不同的範圍或不同的資料型別，可以使用Tween將動畫配置為插入到不同的範圍或資料型別。例如，以下Tween從0.0變為500.0：
Tween doubleTween = Tween<double>(begin: 0.0, end: 500.0); 1 建構函式傳入只需要傳入begin和end兩個值，當然這裡不一定只是double值。
5. Listeners和StatusListeners動畫監聽
Animation物件可以有Listeners和StatusListeners，用addListener()和addStatusListener()。只要動畫的值發生變化，就會呼叫監聽器。我們通常可用呼叫setState() 以將動畫重置狀態。動畫開始，結束，前進或後退時呼叫StatusListener，下列是Flutter提供動畫的監聽方法。
<!--動畫新增監聽--> void addListener(VoidCallback listener);
<!--動畫移除監聽--> void removeListener(VoidCallback listener);
<!--動畫狀態新增監聽--> void addStatusListener(AnimationStatusListener listener);
<!--動畫狀態移除監聽--> void removeStatusListener(AnimationStatusListener listener);
動畫狀態如下：
<!--動畫狀態--> enum AnimationStatus {
<!--動畫在開始時停止--> dismissed,
<!--動畫從開始狀態執行到結束狀態--> forward,
<!--動畫反向執行，從結束狀態執行到開始狀態--> reverse,
<!--動畫執行完成--> completed,
}
OK，下面來看個簡單的Flutter動畫Demo。
import 'package:flutter/animation.dart'; import 'package:flutter/material.dart';
class MyApp extends StatefulWidget { _AnimationApp createState() => new _AnimationApp(); }
class _AnimationApp extends State<MyApp> with SingleTickerProviderStateMixin {
Animation<double> tween; AnimationController controller;
/*初始化狀態*/ initState() { super.initState();
/*建立動畫控制類物件*/ controller = new AnimationController( duration: const Duration(milliseconds: 2000), vsync: this);
/*建立補間物件*/ tween = new Tween(begin: 0.0, end: 1.0) .animate(controller) //返回Animation物件 ..addListener(() { //新增監聽 setState(() { print(tween.value); //列印補間插值 }); }); controller.forward(); //執行動畫 }
Widget build(BuildContext context) { return new GestureDetector( onTap: () { startAnimtaion(); //點選文字 重新執行動畫 },
child: new Center( child: new Text( "Flutter Animation(一)", style: TextStyle(fontSize: 20 * controller.value), //更改文字字型大小 ) )); }
startAnimtaion() { setState(() { controller.forward(from: 0.0); }); }
dispose() {
//銷燬控制器物件 controller.dispose(); super.dispose(); } }
void main() { runApp(new MaterialApp( home: new MyApp(), )); } 打印出的部分補間插值如上圖所示，系統自動計算0.0-1.0之間在2s內的線性插值。
動畫效果圖（製作軟體太low）：