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

mengqingdong1發表於2020-04-03

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

不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什麼,不明白不要緊,請先收藏此文章,然後先去學習下Flutter內建的25種動畫元件。

地址:laomengit.com/flutter/mod…

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

當你對動畫控制元件有了一定的瞭解,在回過頭來細細的品一品這篇文章,你會有不一樣的感受,你品,你細品。

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

從廣義上來說,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地址:laomengit.com 裡面包含160多個元件的詳細用法。

相關文章