Flutter動畫類型
動畫分為兩類：基于tween或基于物理的。以下部分解釋了這些術語的含義，并指出您可以在其中了解更多信息的資源。在某些情況下，我們目前最好的文檔是Flutter圖庫中的示例代碼。
tween動畫
介于兩者之間的簡稱。在補間動畫中，定義了開始點和結束點，以及時間線和定義轉換時間和速度的曲線。該框架計算如何從開始點過渡到結束點。
上面列出的文檔（如動畫教程）并不是關于補間，特別是，但他們在其示例中使用補間。
基于物理的動畫
在基于物理學的動畫中，運動被模擬為與真實世界的行為相似。例如，當你擲球時，它在何處落地，取決于拋球速度有多快，有多沉重，距離地面有多遠。類似地，將連接在彈簧上的球落下（并彈跳）與將連接到繩上的球放下的方式不同。
顫振畫廊
在材質組件下，網(wǎng)格示例演示了一個動畫。從網(wǎng)格中選擇其中一個圖像并放大。您可以用甩手或拖動手勢平移圖像。
另請參閱AnimationController.animateWith和SpringSimulation的API文檔。
Hero animation(英雄動畫)
英雄指的是在屏幕之間飛行的小部件。
使用Flutter's Hero小部件創(chuàng)建英雄動畫。
將英雄從一個屏幕飛到另一個屏幕。
將英雄的形狀從圓形轉換為矩形，同時將其從一個屏幕飛到另一個屏幕的過程中進行動畫處理。
Flutter中的Hero小部件實現(xiàn)了通常稱為共享元素轉換或共享元素動畫的動畫風格。
1?? 基本的動畫概念和類
重點是什么？
Animation對象是Flutter動畫庫中的一個核心類，它內插用于指導動畫的值。
Animation對象知道動畫的當前狀態(tài)（例如，它是開始，停止還是向前或向后移動），但不知道屏幕上顯示的內容。
AnimationController管理動畫。
CurvedAnimation將進展定義為非線性曲線。
Tween在正在動畫的對象所使用的數(shù)據(jù)范圍之間進行插值。 例如，Tween可能會定義從紅到藍的插值，或者從0到255。
使用Listeners和StatusListeners監(jiān)視動畫狀態(tài)更改。
Animation
在Flutter中，動畫對象對屏幕上的內容一無所知。 動畫是一個抽象類，它理解其當前價值和狀態(tài)（完成或解散）。 其中一個比較常用的動畫類型是Animation 。
Flutter中的Animation對象是一個在一定時間內依次生成兩個值之間的插值數(shù)字的類。 動畫對象的輸出可以是線性的，曲線，步進函數(shù)或任何其他可以設計的映射。 根據(jù)動畫對象的控制方式，它可以反向運行，甚至可以在中間切換方向。
動畫還可以插入除double之外的其他類型，例如Animation 或Animation 。
動畫對象具有狀態(tài)。 其當前值始終在.value成員中可用。
一個Animation對象對渲染或build（）函數(shù)一無所知。
2??AnimationController
AnimationController是一個特殊的Animation對象，只要硬件準備好新幀，就會生成一個新的值。 默認情況下，AnimationController在給定的持續(xù)時間內線性生成從0.0到1.0的數(shù)字。 例如，此代碼創(chuàng)建一個Animation對象，但不會啟動它運行：
final AnimationController controller = new AnimationController(
??? duration: const Duration(milliseconds: 2000), vsync: this);
3??Tween
默認情況下，AnimationController對象的范圍從0.0到1.0。 如果您需要不同的范圍或不同的數(shù)據(jù)類型，則可以使用補間來配置動畫以插入到不同的范圍或數(shù)據(jù)類型。 例如，以下Tween從-200.0變?yōu)?.0：
final Tween doubleTween = new Tween(begin: -200.0, end: 0.0);
Tween從Animatable繼承，而不是從Animation繼承。 Animatable與動畫一樣，不需要輸出兩倍。 例如，ColorTween指定兩種顏色之間的進展。
final Tween colorTween =
? ? new ColorTween(begin: Colors.transparent, end: Colors.black54);
要使用Tween對象，請在Tween上調用animate（），傳入控制器對象。 例如，以下代碼在500毫秒的過程中生成從0到255的整數(shù)值。
final AnimationController controller = new AnimationController(
??? duration: const Duration(milliseconds: 500), vsync: this);
Animation alpha = new IntTween(begin: 0, end: 255).animate(controller);
注意 ：Notice that?animate()?返回的是一個 an Animation, not an Animatable.
以下示例顯示了一個控制器，一條曲線和一個Tween：
final AnimationController controller = new AnimationController(
??? duration: const Duration(milliseconds: 500), vsync: this);
final Animation curve =
? ? new CurvedAnimation(parent: controller, curve: Curves.easeOut);
Animation alpha = new IntTween(begin: 0, end: 255).animate(curve);
4??Animation notifications
一個Animation對象可以有Listeners和StatusListeners，它們分別由addListener（）和addStatusListener（）定義。 只要動畫的值發(fā)生變化，就會調用監(jiān)聽器。 Listener最常見的行為是調用setState（）來重建。 動畫開始，結束，向前移動或向后移動（如AnimationStatus所定義）時會調用StatusListener。 下一節(jié)有addListener（）方法的示例，<監(jiān)視動畫的進度顯示https://flutter.io/tutorials/animation/#monitoring>了addStatusListener（）的示例。
重點是什么
使用addStatusListener來處理動畫狀態(tài)更改的通知，例如啟動，停止或反轉方向。
當動畫完成或返回其開始狀態(tài)時，通過反轉方向在無限循環(huán)中運行動畫。
5??用AnimatedWidget簡化
如何使用AnimatedWidget幫助器類（而不是addListener（）和setState（））來創(chuàng)建動畫的控件。
使用AnimatedWidget創(chuàng)建一個可執(zhí)行可重用動畫的小部件。 要從小部件中分離出轉換，請使用AnimatedBuilder。
Flutter API中AnimatedWidgets的示例：AnimatedBuilder，AnimatedModalBarrier，DecoratedBoxTransition，F(xiàn)adeTransition，PositionedTransition，RelativePositionedTransition，RotationTransition，ScaleTransition，SizeTransition，SlideTransition。
AnimatedWidget類允許您在setState（）調用中從動畫代碼中分離出小部件代碼。 AnimatedWidget不需要維護一個State對象來保存動畫。
6??監(jiān)視動畫的進度
使用addStatusListener來處理動畫狀態(tài)更改的通知，例如啟動，停止或反轉方向。
當動畫完成或返回其開始狀態(tài)時，通過反轉方向在無限循環(huán)中運行動畫。
7??用AnimatedBuilder重構
AnimatedBuilder了解如何呈現(xiàn)過渡。
AnimatedBuilder不知道如何渲染小部件，也不知道如何管理動畫對象。
使用AnimatedBuilder將動畫描述為另一個小部件的構建方法的一部分。 如果你只是想用可重用的動畫定義一個小部件，請使用AnimatedWidget。
AnimatedBuilder是渲染樹中的一個獨立的類。 與AnimatedWidget類似，AnimatedBuilder會自動偵聽來自Animation對象的通知，并根據(jù)需要將該控件樹標記為dirty，因此您無需調用addListener（）。
Flutter API中AnimatedBuilder的示例：BottomSheet，ExpansionTile，PopupMenu，ProgressIndicator，RefreshIndicator，Scaffold，SnackBar，TabBar，TextField。
從小部件樹的底部開始，渲染徽標的代碼很簡單：
class LogoWidget extends StatelessWidget {
? // Leave out the height and width so it fills the animating parent
? build(BuildContext context) {
? ? return new Container(
????? margin: new EdgeInsets.symmetric(vertical: 10.0),
????? child: new FlutterLogo(),
? ? );
? }
}
圖中的中間三個塊都在GrowTransition的build（）方法中創(chuàng)建。 GrowTransition小部件本身是無狀態(tài)的，并擁有定義過渡動畫所需的最終變量集合。 build（）函數(shù)創(chuàng)建并返回AnimatedBuilder，它將（匿名構建器）方法和LogoWidget對象作為參數(shù)。 渲染轉換的工作實際上發(fā)生在（匿名構建器）方法中，該方法創(chuàng)建一個適當大小的Container來強制縮放LogoWidget。
8??同時動畫
Curves類定義了一個可用于CurvedAnimation的常用曲線數(shù)組。
