
對初學者來說,看完這篇文章,我想你腦瓜子一定是嗡嗡的,這都說的是什么啊,
不要急躁,開始的我和你是一樣的,第一遍看完,完全不知道在說什么,不明白不要緊,請先收藏此文章,然后先去學習下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多個組件的詳細用法,
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/15042.html
標籤:Android
