基本的動畫概念和類

關(guān)鍵點(diǎn)

• Animation是Flutter動畫庫中的核心類, 插入用于引導(dǎo)動畫的值.
• Animation知道當(dāng)前動畫的狀態(tài)(比如, 是否開始, 暫停, 或繼續(xù)或反轉(zhuǎn)), 但是不關(guān)心屏幕顯示的是什么.
• AnimationController用于管理動畫.
• CurvedAnimation定義過程為非線性曲線.
• Tween 定義了動畫變化的區(qū)間. 比如從紅色到藍(lán)色, 或從0到255.
• 使用Listeners和StatusListeners監(jiān)聽動畫的狀態(tài)改變.

Flutter中的動畫系統(tǒng)基于Animation對象. 控件可以通過讀取它們的當(dāng)前值并監(jiān)聽它們的狀態(tài)變化，直接將這些動畫合并到它們的構(gòu)建函數(shù)中，或者它們可以將動畫作為更復(fù)雜的動畫的基礎(chǔ)，并將它們傳遞給其它控件。

Animation<double>

在Flutter中, 動畫對象不關(guān)心屏幕顯示的是什么. Animation是一個(gè)抽象類, 它知道當(dāng)前的值和狀態(tài)(完成或取消). 其中被廣泛使用的動畫類型是Animation<double>.

Animation在Flutter中是一個(gè)定義了在特定時(shí)間內(nèi)2個(gè)值區(qū)間內(nèi)變化的類. Animation的輸出可能是線性, 也可能是曲線. 一個(gè)步驟函數(shù), 或者任何其它你可以設(shè)計(jì)的映射. 根據(jù)動畫對象的控制方式, 它可以反向運(yùn)行，甚至可以在中間切換方向。

Animation也可以插入除double以外的類型, 比如Animation<Color>或Animation<Size>.

Animation擁有狀態(tài). 它當(dāng)前的值可以通過成員.value獲取.

Animation對象不關(guān)心 rendering或build()方法.

CurvedAnimation

CurvedAnimation定義過程為非線性曲線.

final CurvedAnimation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeIn);

備注: Curves定義了很多通用曲線. 當(dāng)然你也可以自己定義, 比如:

class ShakeCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2);
  }
}

CurvedAnimation和AnimationController都是Animation<double>, 因此你可以把它們互相轉(zhuǎn)換. CurvedAnimation包裝了它正在修改的對象 - 你不需要子類化AnimationController來實(shí)現(xiàn)一條曲線.

AnimationController

AnimationController是一個(gè)特殊的動畫對象, 每當(dāng)硬件為一個(gè)新框架準(zhǔn)備好時(shí), 它就會產(chǎn)生一個(gè)新的值. 在默認(rèn)情況下, 一個(gè)AnimationController在給定的時(shí)間內(nèi)線性地產(chǎn)生0到1.0的數(shù)字。例如，這段代碼創(chuàng)建一個(gè)動畫對象, 但不啟動它:

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);

AnimationController繼承自Animation<double>, 所以它可以在任何需要動畫對象的地方使用。然而，AnimationController有額外的方法來控制動畫. 例如，你可以使用.forward()方法啟動一個(gè)動畫. 數(shù)字的生成與屏幕刷新綁定在一起，所以通常每秒生成60個(gè)數(shù)字. 在生成每個(gè)數(shù)字之后, 每個(gè)動畫對象都會調(diào)用附著的偵聽器對象. 要為每個(gè)孩子創(chuàng)建一個(gè)自定義顯示列表, 請參閱 RepaintBoundary.

在創(chuàng)建AnimationController時(shí), 您可以傳遞一個(gè)vsync參數(shù). vsync的存在阻止了屏幕動畫使用不必要的資源. 您可以通過在類定義中加入單點(diǎn)的SingleTickerProviderStateMixin來使用有狀態(tài)對象作為vsync. 你可以在GitHub上看到一個(gè)這樣的例子animate1.

注意: 在某些情況下, 一個(gè)位置可能會超過AnimationController的0.0-1.0范圍。例如, fling()函數(shù)允許您提供速度, 力和位置(通過Force對象). 這個(gè)位置可以是任何東西, 所以可以在0到1.0范圍之外。
一個(gè)曲率動畫也可以超過0到1.0的范圍, 即使動畫控制器沒有. 根據(jù)所選擇的曲線, 曲率動畫的輸出可以比輸入的范圍更廣. 例如, 彈性曲線, 如曲線, 彈性值將明顯超過或低于默認(rèn)值.

Tween

默認(rèn)情況下, AnimationController對象的范圍從0到0. 如果您需要一個(gè)不同的范圍或不同的數(shù)據(jù)類型, 您可以使用補(bǔ)間來配置一個(gè)動畫，以便將其插入到不同的范圍或數(shù)據(jù)類型中. 例如, 下面的補(bǔ)間從-200.0到0.0范圍.

final Tween doubleTween = Tween<double>(begin: -200.0, end: 0.0);

Tween是一個(gè)無狀態(tài)的對象, 它只接受開始和結(jié)束. Tween的唯一工作是定義一個(gè)從輸入范圍到輸出范圍的映射. 輸入范圍通常是0到1.0, 但這不是必需的.

Tween繼承自Animatable<T>, 而不是Animation<T>. Animatable就像Animation，不是必須輸出double. 例如, ColorTween指定了兩種顏色之間的變化.

final Tween colorTween =
    ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween是一個(gè)無狀態(tài)的對象, 它只接受開始和結(jié)束. Tween的唯一工作是定義一個(gè)漸變對象不存儲任何狀態(tài). 相反, 它提供了將映射函數(shù)應(yīng)用到動畫當(dāng)前值的'evaluate(Animation<double> animation)'方法。動畫對象的當(dāng)前值可以在.value方法中找到. evaluate方法也做一些內(nèi)部處理,例如確保在動畫值分別為0.0和1.0時(shí)返回開始和結(jié)束。

Tween.animate
使用Tween對象, 必須調(diào)用'animate()', 并且傳遞controller對象. 比如, 下面的代碼實(shí)現(xiàn)了數(shù)字在500ms內(nèi)從0到255變化的過程.

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);

注意'animate()'返回的是Animation對象而不是Animatable對象.

下面的代碼演示了controller, curve, Tween:

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
final Animation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeOut);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(curve);

Animation notifications

一個(gè)Animation對象可以通過addListener()和addStatusListner()擁有Listeners和 StatusListener回調(diào). 當(dāng)值有任何變化時(shí), Listener都會被回調(diào). 最常規(guī)的做法就是在回掉里調(diào)用setState()讓UI重建. StatusListener會在動畫開始, 結(jié)束, 前進(jìn), 或反轉(zhuǎn)時(shí)被調(diào)用.