老孟導(dǎo)讀：Flutter 動(dòng)畫(huà)系列文章分為三部分：基礎(chǔ)原理和核心概念拙寡、系統(tǒng)動(dòng)畫(huà)組件授滓、8篇自定義動(dòng)畫(huà)案例，共17篇肆糕。
動(dòng)畫(huà)核心概念
在開(kāi)發(fā)App的過(guò)程中般堆，自定義動(dòng)畫(huà)必不可少，F(xiàn)lutter 中想要自定義動(dòng)畫(huà)诚啃，首先要理解 Flutter 動(dòng)畫(huà)實(shí)現(xiàn)的基本原理及相關(guān)概念淮摔。
第1-4篇介紹了 Flutter 動(dòng)畫(huà)中最重要的三個(gè)概念以及三者之間的關(guān)系：
- AnimationController：動(dòng)畫(huà)控制器，控制動(dòng)畫(huà)的播放始赎、停止等噩咪。繼承自Animation< double >，是一個(gè)特殊的Animation對(duì)象极阅，默認(rèn)情況下它會(huì)線性的生成一個(gè)0.0到1.0的值胃碾，類型只能是 double 類型，不設(shè)置動(dòng)畫(huà)曲線的情況下筋搏，可以設(shè)置輸出的最小值和最大值仆百。
- Curve：動(dòng)畫(huà)曲線，作用和Android中的Interpolator（差值器）類似奔脐，負(fù)責(zé)控制動(dòng)畫(huà)變化的速率俄周，通俗地講就是使動(dòng)畫(huà)的效果能夠以勻速吁讨、加速、減速峦朗、拋物線等各種速率變化建丧。
- Tween：將 AnimationController 生成的 [0,1]值映射成其他屬性的值，比如顏色波势、樣式等翎朱。
第5篇講解了動(dòng)畫(huà)序列 TweenSequence，其將多個(gè) Tween 或者 Curve 關(guān)聯(lián)到一個(gè) AnimationController 中尺铣。
文章鏈接：
- 動(dòng)畫(huà)核心-AnimationController：http://laomengit.com/guide/animation/AnimationController.html
- 動(dòng)畫(huà)核心-Tween：http://laomengit.com/guide/animation/Tween.html
- 動(dòng)畫(huà)核心-Curve：http://laomengit.com/guide/animation/Curve.html
- 動(dòng)畫(huà)核心-總結(jié)：http://laomengit.com/guide/animation/AnimationSummary.html
- 動(dòng)畫(huà)序列 TweenSequence： http://laomengit.com/guide/animation/TweenSequence.html
系統(tǒng)動(dòng)畫(huà)組件
第6篇介紹了20多種系統(tǒng)動(dòng)畫(huà)組件的用法以及如何選取使用哪一種組件拴曲，乍一看20多種系統(tǒng)動(dòng)畫(huà)組件非常多，但其僅分為隱式動(dòng)畫(huà)組件 和 顯式動(dòng)畫(huà)組件 兩種凛忿，用法基本一樣澈灼。文章地址：http://laomengit.com/guide/animation/AnimatedWidget.html
第7篇講解 AnimatedList 列表增/刪動(dòng)畫(huà)組件：http://laomengit.com/guide/animation/AnimatedList.html
第8篇講解 Hero 共享動(dòng)畫(huà)組件：http://laomengit.com/guide/animation/Hero.html
第9篇講解 Material motion 動(dòng)畫(huà)，Material motion 是 Flutter 1.17 大會(huì)上 Flutter 團(tuán)隊(duì)發(fā)布的新的 Animations 軟件包店溢，該軟件包提供了實(shí)現(xiàn)新的 Material motion 規(guī)范的預(yù)構(gòu)建動(dòng)畫(huà)：http://laomengit.com/guide/animation/TranslationAnimations.html
自定義動(dòng)畫(huà)
第10篇案例-自定義路由動(dòng)畫(huà)：http://laomengit.com/guide/animation/NavigatorAnimation.html
第11篇案例-“孔雀開(kāi)屏”的動(dòng)畫(huà)效果：http://laomengit.com/guide/animation/Peacock.html
第12篇案例-自定義漸變進(jìn)度條：http://laomengit.com/guide/animation/CircleProgress.html
第13篇案例-自繪玫瑰：http://laomengit.com/guide/animation/Rose.html
第14篇案例-仿掘金點(diǎn)贊：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篇案例-雷達(dá)掃描效果：http://laomengit.com/guide/animation/Radar.html
結(jié)尾
很多人都覺(jué)得 Flutter 動(dòng)畫(huà)比較難叁熔，不好入門，很多讀者也反饋如何才能自定義動(dòng)畫(huà)床牧？下面是我對(duì)學(xué)習(xí) Flutter 動(dòng)畫(huà)的一些方法：
- 第一步：詳細(xì)的閱讀第1-5篇荣回，也就是基礎(chǔ)概念部分，當(dāng)然對(duì)于初學(xué)者來(lái)說(shuō)叠赦，閱讀完后依然會(huì)迷茫驹马，不理解革砸，沒(méi)關(guān)系除秀，記住即可。
- 第二步：使用系統(tǒng)動(dòng)畫(huà)組件完成一些簡(jiǎn)單的動(dòng)畫(huà)效果算利，照貓畫(huà)虎册踩，不要覺(jué)得使用系統(tǒng)組件沒(méi)有用處，當(dāng)你寫(xiě)完20多個(gè)系統(tǒng)動(dòng)畫(huà)組件的用法的時(shí)候效拭，你一定對(duì)動(dòng)畫(huà)的認(rèn)知有極大的提升暂吉。
- 第三步：在回過(guò)頭來(lái)，認(rèn)認(rèn)真真的閱讀第1-5篇缎患，相信我慕的，你一定會(huì)有不一樣的感覺(jué)。
- 第四步：動(dòng)畫(huà)系列文章中有8篇為自定義動(dòng)畫(huà)案例挤渔，建議先根據(jù)動(dòng)畫(huà)效果獨(dú)自完成肮街，如果沒(méi)有思路再參考文章。
個(gè)人覺(jué)得只有通過(guò)多寫(xiě)才能理解的更加深刻判导，紙上得來(lái)終覺(jué)淺嫉父，絕知此事要躬行沛硅。
Flutter 動(dòng)畫(huà)系列已經(jīng)全部完成，如果對(duì)你有所幫助绕辖，請(qǐng)不要吝惜你的贊 和 轉(zhuǎn)發(fā)摇肌。
交流
老孟Flutter博客地址（330個(gè)控件用法）：http://laomengit.com
歡迎加入Flutter交流群（微信：laomengit）、關(guān)注公眾號(hào)【老孟Flutter】：
