Flutter - 動畫 API 梳理

前行的烏龜發表於2020-01-01

Flutter動畫API

Flutter 以 Widget 數量多著稱，所以 Flutter 中的動畫 API 那是一個多啊，我覺得有必要梳理一下，大家看的舒服一些

目前轉場，共享元素，SVG 動畫還沒看，其他的都差不多了

回顧 androoid 動畫歷史

android 中有什麼動畫，Flutter 差不多就得有什麼動畫，區別可能是 Flutter 擁有後發優勢，精簡合併和一部分

Android 動畫歷程如下：

API 1 - View Animations，也就是補間動畫，說實話我也不知道為啥叫這麼個沒啥關聯性的名字。特點是動畫作用於 draw 階段，動畫結束後 view 的位置還是在 layout 時的位置，造成了經典的 view 動畫結束後無法相應點選事件的事
API 11 - View Animations，Object Animator，iew Property Animator 都是屬性動畫，直接操作 view 的屬性，這就能在 layout 階段時起作用了
API 19 - Transitions 變換動畫，可以在 view 屬性改變時插入預設動畫
API 21 - Animated Vector Drawable 向量動畫，API 試用很簡單，但是向量設計這塊很麻煩，複雜有點的一般 coder 還真搞不定
Android X - Physics 物理動畫和 MotionLayout ConstraintLayout 中的動畫

Flutter 中也有補間動畫，特點和 android 的一樣，我可討厭了，不知道為啥 Flutter 還要把他帶上，官方文件上說是為了給 window 用

剩下的 Flutter 動畫以 屬性動畫 和 變換動畫 為主，尤其是 變換動畫 這塊結合了 Transitions、Physics、MotionLayout 眾特點於一身。Flutter 中的 Physics 我看更多以插值器的形式出現和配置的

Flutter 一切動畫的基礎

Flutter 一切動畫都是基於 AnimatedWidget 開發的(補間動畫不知道是不是啊，沒看)，而 AnimatedWidget 是對 Flutter 動畫核心 API 的集大成者，這些核心動畫 API 如下：

Animation - 動畫 API 的基礎，所有的動畫最終都是用 Animation 型別來承載。Animation 主要職能是儲存動畫每一幀的數值
Curve - 動畫的插值器，用於動畫每幀數值的計算的，這個大家都是熟悉
AnimationController - 動畫的控制器，動畫操控，監聽部分都寫在這裡
Tween - 數值區間，主要用來處理不同資料型別的資料，比如 widget 動畫中最常用的都 double，color 等
Ticker - 負責分發 async，觸發頁面 rebuild，詳細的去看原始碼研究，程式碼一般用不上這個

詳細的大家去看我的這篇文章，再次說明這是 Flutter 動畫的基礎核心，我們自己改動畫 API 也是在 AnimatedWidget 基礎上操作，所以大家一定要搞明白 *Flutter - 動畫基礎知識點

Flutter 補間動畫

Transform.rotate
Transform.translate
Transform.scale

就這幾個，可見 Flutter 對他也是不怎麼上心

Flutter 屬性動畫

和 android 的屬性動畫一模一樣，思路都沒變，這在 Flutter 中叫：內建動畫

SlideTransition - 基於自身倍數的位移動畫
AlignTransition - 對齊動畫，核心也是位移，只不過因為對齊方式的變化
PositionedTransition - 縮放動畫，限定父佈局只能是 stack
FadeTransition - 透明度動畫
ScaleTransition - 縮放動畫，這個是 android 中的那種縮放動畫，可以指定中心點
SizeTransition - 寬高動畫，限制是每次只能執行一個維度的動畫，寬和高一起不行，那就是縮放動畫了
RotationTransition - 旋轉動畫，特點是其數值是 0-1 之間的，旋轉90度 = 0.25

詳細的請看：

Flutter - 內建動畫 API

Flutter 變換動畫

Flutter 的變換動畫融合和 android 中後來出現的動畫概念，還包括 LayoutAnimator 佈局動畫

AnimatedSwitcher - widget 內容改變時可以播放自己指定的動畫
AnimatedContainer - 帶動畫的 Container，像 Container 一眼使用，在其中 color、width、height、圓角改變時會觸發過度動畫，動畫不能控制，有些類似與 path 動畫
AnimatedCrossFade - 切換不同佈局時可以顯示動畫，但是不能自己設定動畫，預設就是淡入淡出，並且在大小不通切換時顯示不好
DecoratedBoxTransition - 邊框動畫，核心是通過圓角角度的改變實現形狀上的變化，這個變化是自然過度的，這點和 path 動畫是一樣了
AnimatedDefaultTextStyle - 文字樣式改變時的切換動畫，主要呈現的大小變換方面的動畫，顏色的漸變過度不明顯，但是體驗不好的地方在於，大小字切換時字型粗細的變化真實有點辣眼，有點卡頓
AnimatedModalBarrier - 顏色改變的變換動畫，特殊的地方在於其必須放到所操的 widget 的 child 中，有明確的應用場景，就是點選時改變背景色，比如 dialog 彈出時，背景變灰色
AnimatedOpacity - 透明度的變化動畫
AnimatedPhysicalModel - 陰影變換動畫，設定有些複雜
AnimatedPositioned - stack 中 widget 位置，大小變換動畫
AnimatedSize - widget 大小變換動畫