Flutter - 動畫 API 梳理

Flutter 以 Widget 數量多著稱，因此 Flutter 中的動畫 API 那是一個多啊，我以爲有必要梳理一下，你們看的舒服一些。本文不是詳細介紹 API，而是幫你們順利如下其中脈絡，給你們歸歸類，細數都有具體的 API，詳細的我有專門的文章去介紹，你們點連接看個人文章就好了

目前轉場，共享元素，SVG 動畫還沒看，其餘的都差很少了

---

回顧 android 動畫歷史

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 大小變換動畫

詳細的請看：

• Flutter - 變換動畫

---

最後

最後啦，要感謝本身寫技術博客的習慣，要不這些資料，這麼細誰能記得清楚呢，因此啊你們能寫博客就寫點，寫多休少不重要，重要的是要寫。將來的你會感謝如今的本身的

有時我會回來看看本身寫的文章，呀的一聲，好驚訝啊，原來當時我寫的文章這麼 NB，這麼有深度啊，原來我寫了好幾十萬字啦，好些寫小說的都沒我寫的多哈~