1.歡迎來到Flutter 動畫探索
本冊的釋出，標誌著 Flutter 框架底層三位大佬的集結完畢:
Painting 繪製模組: 《Flutter 繪製指南 - 妙筆生花》Gestures 手勢模組: 《Flutter 手勢探索 - 指掌天下》Animation 動畫模組:《Flutter 動畫探索 - 流光幻影》
另外，如果你買不起小冊，也可以下載專案的原始碼跑跑看，學習一下。
| 小冊名 | 小冊地址 | 原始碼地址 |
|---|---|---|
《Flutter 繪製指南 - 妙筆生花》 | 這裡 | idraw |
《Flutter 手勢探索 - 指掌天下》 | 這裡 | itouch |
《Flutter 動畫探索 - 流光幻影》 | 這裡 | ianim |
2. 想說在前面的話
手勢、繪製、動畫、佈局 四個大部分是介面構成和互動體驗的核心，一切可視的展現、互動的觸發都脫離不了這四者。 Flutter 作為一個優秀的跨平臺框架，但很多人對他並沒有全面的認知，只停留在表面的使用上。如果需求的 UI 表現沒有內建元件 支援，就無法繼續進行，只能找三方庫，找不到的話就只能止步於此。這就很容易達到一個瓶頸期： 繪製不會畫、手勢不太懂、動畫不會做、佈局一團糟。
目前的三本小冊比較系統地介紹了 Flutter 繪製技能、Flutter 手勢體系、Flutter 動畫體系 三大模組。這些知識可以為你在 Flutter 技術前進的路上掃除一些障礙，讓你不再僅限於簡單的元件使用，更有能力靠自己去解決一些實際問題。我也很高興前兩本小冊可以為大家提供技術上的幫助，你們的肯定讓我非常欣慰，也讓我覺得自己做的事是有價值的。
3.關於閱讀原始碼
現在 內卷 這個詞非常火，稍微深入一丟丟，看看原始碼，就有人吵著 卷 。一個演員，臺上三分鐘，臺下十年功。想磨練自己精進演技，克服表演中的重重困難，這能叫卷嗎？幹這行的，既然吃這口飯，就要有這份手藝 。如果一個工具會和你朝夕相伴，或可能成為你飯碗的時候，那你對這個工具再怎麼深入研究都是不為過的，因為我們就是幹這個的。我們自然角色就絕不僅僅是一個使用者，對工具的認識和瞭解，是工具使用者最基礎的能力。
內卷 是供求不平衡下的不合理競爭，這不是放棄精進自己，擴充知識的藉口。在原始碼中藏有很多有價值的寶藏，這些會開拓你的視野，讓你更熟悉自己所使用的工具。可以體會作者的用意，思索某個類被定義的意義，發現其中運用的模式，這些都能對我們的編碼能力起到一個正反饋迴圈。即看得越多，體會得越深，你就更容易去閱讀原始碼，汲取的經驗也就越多。反之就是一個負反饋，不想看原始碼，因為看不懂，遇到問題就去搜，搜不到就去問。這樣你的目標是解決問題，而不是擁有解決問題的能力。無法有更深層的認識和思考，就很容易出現更多的問題，你面臨的就是更多的搜和問 。
授人以魚不如授人以漁 就是這個道理，不要只是關注解決面前的問題(肚子餓) ，而應更注重解決問題的能力(如何獲取食物)。然而，自己看原始碼確實是一件非常痛苦的事，特別是能力欠佳的朋友，大多數都沒有耐心和能力去深究原始碼的。其中有不少人是想要去深入認識原始碼如何實現的，奈何火候不到，看不出所以然。所以，我也很願意去分享自己讀碼的收穫，為這些人指引道路。小冊中包含了很多原始碼的分析，我不想直接給你這條魚，我想要給你獲取魚的方式。
4. 關於Flutter 動畫
站在廣義的角度，萬物的狀態都具有運動性。在現實生活中，一個人在跑步，我們感覺在動，是因為在時間變化中，他的位置狀態發生了變化。電影的播放，我們感覺在動，是因為在時間變化中，螢幕畫素狀態發生了變化。一旦屬性的變化頻率高，我們就會感知到流暢的運動表現。
對於顯示裝置來說，我們只要按指定的規律高頻率地讓一個物件的某個屬性 進行變化，就可以達到對該屬性的動畫。比如下面小球的上升，我們能感知到它的運動，只是因為在 1s 內不斷讓其位置屬性變化而已，每個點代表一幀，當一秒可以運動 60 幀，就能感到流暢的動畫效果。
可能說到 Flutter 動畫 元件，你腦海裡會浮現一大堆動畫元件，感覺亂七八糟的。為 Flutter 動畫元件紛繁複雜，只是因為你浮於世界的表象。就像這絢爛的世界，事物萬千，亂花漸欲迷人眼，終也只是由各種元素拼組構成罷了。眾多 Flutter 動畫元件就相當於基於底層建築之上的繁華萬物，如果你只是為了使用它們，而死記硬背地認識，自然會深陷表象之中，無法窺其奧祕。
本冊最主要的目的是為了，讓大家瞭解 Flutter 框架底層是如何讓動畫運轉起來的，從根本上去認知這個世界。最終你會站在世界的頂峰，手握宇宙執行的機制，看著散佈於星河中的元件，這就是境界的不同。一切上層的建築都無法脫離底層執行的機制，對底層的認知貫通之後，上層自然會水到渠成，融會貫通。
4. 本冊介紹
本冊只要分為三個大部分: (注，第一篇為第 0 章)
這本小冊對於不同能力階段的朋友都比較實用，其中 1~6 章是介紹 動畫器 及其周邊類的使用，較為基礎和重要，適合剛入門的新手品嚐。7 ~ 11 章介紹一些 Flutter 動畫元件的使用及原始碼實現，適合中等階段的朋友品嚐。最後 12 ~16 章是框架層動畫相關原始碼的分析，適合老手品嚐。
小冊內容概述 - 動畫器使用篇
前六章主要是圍繞 Animation 、Curve 、Animatable 的使用進行介紹，通一些動畫的案例瞭解 Flutter 中如何處理動畫。比如，如何將下面的文字外層的遮罩不斷變大:
動畫本質上就是狀態的不斷變更和更新，不通過 Animation 我們依然可以實現一些動畫效果。比如使用 Timer 進行週期性任務。
在 2 ~ 4 章 我們會全面認識 Animation 、Curve 、Animatable 這三個動畫核心類的使用。並且可以讓你更直觀形象地去看到動畫數值變化的過程。比如下面是附加 Curves.bounceOut 運動效果，你就知道，原來它是這樣變化的，而不是僅是一個冰冷的單詞。
動畫控制器有很多開啟的方法，通過圖形可以更形象認知，比如下面是 reverse 為 true 時，重複開啟時，動畫控制器數值變化的情況。通過結合圖形，可以讓大家對動畫的認知更為深刻，華羅庚說過：
數缺形時少直觀,
形少數時難入微。
數形結合百般好,
隔離分家萬事休。
複製程式碼
第 5 章是通過三個案例，練習鞏固動畫器的對元件的動畫。結合具體的案例可以說明一些操作注意細節。
呼吸光暈
點選旋轉折返
綻放選單
第 6 章 通過四個 loading 繪製，練習動畫在繪製中的使用。
小冊內容概述 - 動畫元件篇
Flutter 中內建了很多可以執行動畫的元件，比如將裝飾進行動畫的 DecoratedBoxTransition。
透明度動畫 AnimatedOpacity 。
某個元件的屬性切換動畫 AnimatedSwitcher 。
兩組間之間的切換動畫 AnimatedCrossFade。
這部分還有很多其他的案例，就不一一列舉了，文中並不止與對動畫元件的使用，更會帶大家一起探索原始碼的實現，不浮於表層，才能認識到一個更真實的世界。
小冊內容概述 - 原始碼篇
如果你熟悉了前面兩個部分，那麼對 Flutter 動畫使用方面也算爐火純青了。當然本冊並不止於此，還會去分析整個 Flutter 動畫體系 的原始碼，包括 Animation 、Curve 、Animatable 、以及 Ticker 等。 這部分是本冊最核心的知識，如果你一時難以消化，建議先簡單瞭解一下。在之後的開發中多用用動畫，隨著你對它越來越熟悉，再逐漸去深入瞭解，這是事物發展的必要過程。
最後一句：由於純手工碼字以及認知的侷限性，如果本冊內容上有什麼錯誤、疑問、錯別字或修改建議，可在小冊的評論區指正，或直接聯絡我進行探討 ~
5. 最後給小冊一個特寫:
