基本的動畫概念和類
關鍵點
- Animation是Flutter動畫庫中的核心類, 插入用于引導動畫的值.
- Animation知道當前動畫的狀態(比如, 是否開始, 暫停, 或繼續或反轉), 但是不關心屏幕顯示的是什么.
- AnimationController用于管理動畫.
- CurvedAnimation定義過程為非線性曲線.
- Tween 定義了動畫變化的區間. 比如從紅色到藍色, 或從0到255.
- 使用Listeners和StatusListeners監聽動畫的狀態改變.
Flutter中的動畫系統基于Animation對象. 控件可以通過讀取它們的當前值并監聽它們的狀態變化，直接將這些動畫合并到它們的構建函數中，或者它們可以將動畫作為更復雜的動畫的基礎，并將它們傳遞給其它控件。
Animation<double>
在Flutter中, 動畫對象不關心屏幕顯示的是什么. Animation是一個抽象類, 它知道當前的值和狀態(完成或取消). 其中被廣泛使用的動畫類型是Animation<double>.
Animation在Flutter中是一個定義了在特定時間內2個值區間內變化的類. Animation的輸出可能是線性, 也可能是曲線. 一個步驟函數, 或者任何其它你可以設計的映射. 根據動畫對象的控制方式, 它可以反向運行，甚至可以在中間切換方向。
Animation也可以插入除double以外的類型, 比如Animation<Color>或Animation<Size>.
Animation擁有狀態. 它當前的值可以通過成員.value獲取.
Animation對象不關心 rendering或build()方法.
CurvedAnimation
CurvedAnimation定義過程為非線性曲線.
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
備注: Curves定義了很多通用曲線. 當然你也可以自己定義, 比如:
class ShakeCurve extends Curve {
@override
double transform(double t) {
return math.sin(t * math.PI * 2);
}
}
CurvedAnimation和AnimationController都是Animation<double>, 因此你可以把它們互相轉換. CurvedAnimation包裝了它正在修改的對象 - 你不需要子類化AnimationController來實現一條曲線.
AnimationController
AnimationController是一個特殊的動畫對象, 每當硬件為一個新框架準備好時, 它就會產生一個新的值. 在默認情況下, 一個AnimationController在給定的時間內線性地產生0到1.0的數字。例如，這段代碼創建一個動畫對象, 但不啟動它:
final AnimationController controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
AnimationController繼承自Animation<double>, 所以它可以在任何需要動畫對象的地方使用。然而，AnimationController有額外的方法來控制動畫. 例如，你可以使用.forward()方法啟動一個動畫. 數字的生成與屏幕刷新綁定在一起，所以通常每秒生成60個數字. 在生成每個數字之后, 每個動畫對象都會調用附著的偵聽器對象. 要為每個孩子創建一個自定義顯示列表, 請參閱 RepaintBoundary.
在創建AnimationController時, 您可以傳遞一個vsync參數. vsync的存在阻止了屏幕動畫使用不必要的資源. 您可以通過在類定義中加入單點的SingleTickerProviderStateMixin來使用有狀態對象作為vsync. 你可以在GitHub上看到一個這樣的例子animate1.
注意: 在某些情況下, 一個位置可能會超過AnimationController的0.0-1.0范圍。例如, fling()函數允許您提供速度, 力和位置(通過Force對象). 這個位置可以是任何東西, 所以可以在0到1.0范圍之外。
一個曲率動畫也可以超過0到1.0的范圍, 即使動畫控制器沒有. 根據所選擇的曲線, 曲率動畫的輸出可以比輸入的范圍更廣. 例如, 彈性曲線, 如曲線, 彈性值將明顯超過或低于默認值.
Tween
默認情況下, AnimationController對象的范圍從0到0. 如果您需要一個不同的范圍或不同的數據類型, 您可以使用補間來配置一個動畫，以便將其插入到不同的范圍或數據類型中. 例如, 下面的補間從-200.0到0.0范圍.
final Tween doubleTween = Tween<double>(begin: -200.0, end: 0.0);
Tween是一個無狀態的對象, 它只接受開始和結束. Tween的唯一工作是定義一個從輸入范圍到輸出范圍的映射. 輸入范圍通常是0到1.0, 但這不是必需的.
Tween繼承自Animatable<T>, 而不是Animation<T>. Animatable就像Animation，不是必須輸出double. 例如, ColorTween指定了兩種顏色之間的變化.
final Tween colorTween =
ColorTween(begin: Colors.transparent, end: Colors.black54);
Tween是一個無狀態的對象, 它只接受開始和結束. Tween的唯一工作是定義一個漸變對象不存儲任何狀態. 相反, 它提供了將映射函數應用到動畫當前值的'evaluate(Animation<double> animation)'方法。動畫對象的當前值可以在.value方法中找到. evaluate方法也做一些內部處理,例如確保在動畫值分別為0.0和1.0時返回開始和結束。
Tween.animate
使用Tween對象, 必須調用'animate()', 并且傳遞controller對象. 比如, 下面的代碼實現了數字在500ms內從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回調. 當值有任何變化時, Listener都會被回調. 最常規的做法就是在回掉里調用setState()讓UI重建. StatusListener會在動畫開始, 結束, 前進, 或反轉時被調用.
