关于flutter: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】：