基本的動畫概念和類

關(guān)鍵點

• Animation是Flutter動畫庫中的核心類, 插入用于引導(dǎo)動畫的值.
• Animation知道當(dāng)前動畫的狀態(tài)(比如, 是否開始, 暫停, 或繼續(xù)或反轉(zhuǎn)), 但是不關(guān)心屏幕顯示的是什么.
• AnimationController用于管理動畫.
• CurvedAnimation定義過程為非線性曲線.
• Tween 定義了動畫變化的區(qū)間. 比如從紅色到藍色, 或從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是一個抽象類, 它知道當(dāng)前的值和狀態(tài)(完成或取消). 其中被廣泛使用的動畫類型是Animation<double>.

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

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來實現(xiàn)一條曲線.

AnimationController

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

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

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

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

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

Tween

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

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

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

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

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

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

Tween.animate
使用Tween對象, 必須調(diào)用'animate()', 并且傳遞controller對象. 比如, 下面的代碼實現(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

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/17564.html