![](https://img-blog.csdnimg.cn/20200403200204468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

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

不要急躁，开始的我和你是一样的，第一遍看完，完全不知道在说什么，不明白不要紧，请先收藏此文章，然后先去学习下Flutter内置的25种动画组件。

地址：[http://laomengit.com/flutter/module/animated_1/](http://laomengit.com/flutter/module/animated_1/)。

不要仅仅是看，要多写，只有写才能发现问题。

当你对动画控件有了一定的了解，在回过头来细细的品一品这篇文章，你会有不一样的感受，你品，你细品。

这篇文章的内容是Google 的Flutter工程师Emily原创，我仅仅是翻译，原创地址：[https://www.youtube.com/watch?v=GXIJJkq_H8g](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直接绘制到画布上，而无需标准的小部件构建范例，如果使用的好，可以创建一些整洁、丰富的自定义的效果或者节省性能，但如果使用的不好，你的动画可能引起更多的性能问题，就像是手动管理内存一样，要处理好共享指针，为什么要用这样用，是否有内存问题，这些问题都要考虑清楚。

最后总结如下图：

![](http://img.laomengit.com/choose_animation.png)

## 交流

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：[http://laomengit.com](http://laomengit.com) 里面包含160多个组件的详细用法。

ITPub博客

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

最新文章