對初學者來說,看完這篇文章,我想你腦瓜子一定是嗡嗡的,這都說的是什麼啊。 不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什麼,不明白不要緊,請先收藏此文章,然後先去學習下Flutter內置的25種動畫組件。 地址: "http://laomengit.com/flutter/module ...
對初學者來說,看完這篇文章,我想你腦瓜子一定是嗡嗡的,這都說的是什麼啊。
不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什麼,不明白不要緊,請先收藏此文章,然後先去學習下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多個組件的詳細用法。