【Flutter 實戰】17篇影片系列文章帶你走進自定義影片-有解無憂

老孟導讀：Flutter 影片系列文章分為三部分：基礎原理和核心概念、系統影片組件、8篇自定義影片案例，共17篇，

影片核心概念

在開發App的程序中，自定義影片必不可少，Flutter 中想要自定義影片，首先要理解 Flutter 影片實作的基本原理及相關概念，

第1-4篇介紹了 Flutter 影片中最重要的三個概念以及三者之間的關系：

AnimationController：影片控制器，控制影片的播放、停止等，繼承自Animation< double >，是一個特殊的Animation物件，默認情況下它會線性的生成一個0.0到1.0的值，型別只能是 double 型別，不設定影片曲線的情況下，可以設定輸出的最小值和最大值，
Curve：影片曲線，作用和Android中的Interpolator（差值器）類似，負責控制影片變化的速率，通俗地講就是使影片的效果能夠以勻速、加速、減速、拋物線等各種速率變化，
Tween：將 AnimationController 生成的 [0,1]值映射成其他屬性的值，比如顏色、樣式等，

第5篇講解了影片序列 TweenSequence，其將多個 Tween 或者 Curve 關聯到一個 AnimationController 中，

文章鏈接：

影片核心-AnimationController：http://laomengit.com/guide/animation/AnimationController.html
影片核心-Tween：http://laomengit.com/guide/animation/Tween.html
影片核心-Curve：http://laomengit.com/guide/animation/Curve.html
影片核心-總結：http://laomengit.com/guide/animation/AnimationSummary.html
影片序列 TweenSequence： http://laomengit.com/guide/animation/TweenSequence.html

系統影片組件

第6篇介紹了20多種系統影片組件的用法以及如何選取使用哪一種組件，乍一看20多種系統影片組件非常多，但其僅分為隱式影片組件 和 顯式影片組件 兩種，用法基本一樣，文章地址：http://laomengit.com/guide/animation/AnimatedWidget.html

第7篇講解 AnimatedList 串列增/刪影片組件：http://laomengit.com/guide/animation/AnimatedList.html

第8篇講解 Hero 共享影片組件：http://laomengit.com/guide/animation/Hero.html

第9篇講解 Material motion 影片，Material motion 是 Flutter 1.17 大會上 Flutter 團隊發布的新的 Animations 軟體包，該軟體包提供了實作新的 Material motion 規范的預構建影片：http://laomengit.com/guide/animation/TranslationAnimations.html

自定義影片

第10篇案例-自定義路由影片：http://laomengit.com/guide/animation/NavigatorAnimation.html

第11篇案例-“孔雀開屏”的影片效果：http://laomengit.com/guide/animation/Peacock.html

第12篇案例-自定義漸變進度條：http://laomengit.com/guide/animation/CircleProgress.html

第13篇案例-自繪玫瑰：http://laomengit.com/guide/animation/Rose.html

第14篇案例-仿掘金點贊：http://laomengit.com/guide/animation/JuejinLike.html

第15篇案例-酷炫的3D效果：http://laomengit.com/guide/animation/3DPerspective.html

第16篇案例-漣漪效果：http://laomengit.com/guide/animation/WaterRipple.html

第17篇案例-雷達掃描效果：http://laomengit.com/guide/animation/Radar.html

結尾

很多人都覺得 Flutter 影片比較難，不好入門，很多讀者也反饋如何才能自定義影片？下面是我對學習 Flutter 影片的一些方法：

第一步：詳細的閱讀第1-5篇，也就是基礎概念部分，當然對于初學者來說，閱讀完后依然會迷茫，不理解，沒關系，記住即可，
第二步：使用系統影片組件完成一些簡單的影片效果，照貓畫虎，不要覺得使用系統組件沒有用處，當你寫完20多個系統影片組件的用法的時候，你一定對影片的認知有極大的提升，
第三步：在回過頭來，認認真真的閱讀第1-5篇，相信我，你一定會有不一樣的感覺，
第四步：影片系列文章中有8篇為自定義影片案例，建議先根據影片效果獨自完成，如果沒有思路再參考文章，

個人覺得只有通過多寫才能理解的更加深刻，紙上得來終覺淺，絕知此事要躬行，

Flutter 影片系列已經全部完成，如果對你有所幫助，請不要吝惜你的贊和轉發，

交流

老孟Flutter博客地址（330個控制元件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/300.html

標籤：Dart

上一篇：【Flutter 實戰】影片序列、共享影片、路由影片

下一篇：Flutter —布局系統概述