【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組件終結篇】332個組件 658頁PDF

• 【Flutter 實戰】自定義動畫-漣漪和雷達掃描

• 【Flutter 實戰】一文學會20多個動畫組件

• Flutter 實現酷炫的3D效果
  

  
  

關注「老孟Flutter」

讓你天天進步一點點

本文分享自微信公衆號 - 老孟Flutter（lao_meng_qd）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。