《Flutter 动画系列二》Google工程师带你选择Flutter动画控件

对初学者来讲，看完这篇文章，我想你脑瓜子必定是嗡嗡的，这都说的是什么啊。

不要急躁，开始的我和你是同样的，第一遍看完，彻底不知道在说什么，不明白没关系，请先收藏此文章，而后先去学习下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多个组件的详细用法。