《Flutter 動畫系列二》Google工程師帶你選擇Flutter動畫控件

對初學者來講，看完這篇文章，我想你腦瓜子必定是嗡嗡的，這都說的是什麼啊。

不要急躁，開始的我和你是同樣的，第一遍看完，徹底不知道在說什麼，不明白沒關係，請先收藏此文章，而後先去學習下Flutter內置的25種動畫組件。

地址：http://laomengit.com/flutter/module/animated_1/。

不要僅僅是看，要多寫，只有寫才能發現問題。

當你對動畫控件有了必定的瞭解，在回過頭來細細的品一品這篇文章，你會有不同的感覺，你品，你細品。

這篇文章的內容是Google 的Flutter工程師Emily原創，我僅僅是翻譯，原創地址：https://www.youtube.com/watch?v=GXIJJkq_H8g。

從廣義上來講，Flutter動畫組件分爲兩種類型，

• Drawing-based animations：基於繪製的動畫，就像是畫畫同樣，一般都是獨立的控件，例如遊戲角色或者很難用純碎的代碼來完成的效果。
• Core-based animations：基於核心的動畫，它面向組件，基於標準的佈局和樣式，從本質上說，傾向於加強控件的外觀和過渡效果，而不是本身充當獨立的控件。

想想你的動畫是基於繪製的，仍是基於核心（組件）的：

• 若是是基於繪製的，並且你的團隊中有專門的設計人員提供素材，建議你使用第三方工具，好比Rive和Lottie，這些庫能夠方便的導入資源來構建動畫。
• 若是是基於核心（組件）的，涉及組件的變化，好比顏色、形狀、位置的變化等。

在Flutter中基於核心（組件）的動畫又分爲兩類：

• 隱式動畫控件：只需提供給組件開始、結束值，系統執行動畫，好比AnimatedAlign等組件。
• 顯式動畫控件：須要設置AnimationController，控制動畫的執行，使用顯式動畫能夠完成任何隱式動畫的效果，甚至功能更豐富一些，不過你須要管理該動畫的AnimationController生命週期，AnimationController並非一個控件，因此須要將其放在stateful 控件中。

從上面的分類中，咱們不難看出，使用隱式動畫控件，代碼更簡單，並且無需管理AnimationController的生命週期。

如何肯定使用隱式動畫控件仍是顯式動畫控件？你須要考慮3個問題：

• 動畫是否一直重複，好比音樂播放。
• 動畫值是否不連續，好比一個圓圈，不連續的尺寸變化：小->大，小->大，小->大。連續的尺寸變化：小->大->小->大。
• 是否有多個組件一塊兒動畫。

若是你對這三個問題中的任何一個回答「是」，那麼你須要使用顯式動畫控件，不然你就使用隱式動畫控件。

一旦你肯定了使用顯式動畫控件或者隱式動畫控件，這個時候你就須要找到對應的組件，你須要的組件是否已經在Flutter中內置了?

對於隱式組件來講：

• 已經內置：直接使用，固然也能夠看下AnimatedContainer組件，AnimatedContainer是很是強大且用途普遍的動畫組件。
• 未內置：可使用TweenAnimationBuilder建立一個自定義的動畫控件。

對於顯示組件來講：

• 內置：直接使用相關組件，好比xxxTransition組件。
• 未內置：自定義一個動畫控件。

自定義一個顯式的動畫組件須要確認這個動畫組件是單獨一個組件仍是組件的一部分，

• 單獨一個顯示組件：你應該繼承 AnimatedWidget來實現。
• 組件的一部分：使用AnimatedBuilder來實現。

還有最後一件事情須要考慮：若是你發現由CustomPainter引發的性能問題，你能夠像AnimatedWidget同樣使用它，可是CustomPainer直接繪製到畫布上，而無需標準的小部件構建範例，若是使用的好，能夠建立一些整潔、豐富的自定義的效果或者節省性能，但若是使用的很差，你的動畫可能引發更多的性能問題，就像是手動管理內存同樣，要處理好共享指針，爲何要用這樣用，是否有內存問題，這些問題都要考慮清楚。

最後總結以下圖：

交流

若是你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流羣（微信：laomengit）。

同時也歡迎關注個人Flutter公衆號【老孟程序員】，公衆號首發Flutter的相關內容。

Flutter地址：http://laomengit.com 裏面包含160多個組件的詳細用法。