Flutter 动画详解系列

前言：动画会让用户界面感觉更直观、流畅，能改善用户体验。 在Flutter中我们可以轻松实现各种动画类型。目前Flutter中很多 widget（特别是Material Design widgets），都实现了设计规范中定义的标准动画效果。但是我们也可以自定义这些动画效果。

Flutter中动画的类型

在Flutter中动画分为两类： 基于图形动画（以图形的形式制作动画，三方库 Rive 、Lottie）、基于代码动画 （主要针对于 Widgets 的大小、 颜色、形状变动）。文章主要讲解基于代码动画类型的动画。

基于代码动画

在 Flutter 中基于代码动画，也主要分为两种形式：补间(Tween)动画、 拟物动画。

补间(Tween)动画

Tween意为在两者之间，在Tween动画中我们定义开始点和结束点、时间线以及定义转换时间和速度的曲线。然后就交由框架完成如何从开始点过渡到结束点的动画效果。

拟物动画

拟物动画是对真实世界的行为进行建模，使动画效果类似于现实中的物理效果。例如当你掷球时，它在何处落地，取决于抛球速度有多快、球有多重、距离地面有多远。

如何创建恰当的动画

在知道 Flutter 的动画类型之后，我们需要知道如何创建我们想要的动画效果，在 Flutter 动画也被分为隐式动画、 显示动画。当我们创建一个动画效果时，如果你不知道如何选择这两种方式，你可以试着回答下面的三个问题：

• 动画效果是否"永远"重复？永远是指某个条件下动画一直重复，当条件变动时，动画可以停止。

• 动画的值是否不连续？如下图圆从小到大、从小到大，并未连续的小->大->小->大。

  
  不连续

• 动画是否由多个Widgets共同组成？

  
  多widgets动画

如果以上三个问题，都是肯定的回答，那么你需要的是显示动画，否则使用隐式动画将会是你更好的选择。

隐式动画

如果你选择了隐式动画之后，首先你可以尝试在 Flutter 框架中寻找符合你要求的 Widgets，Flutter 对隐式动画的命名方式一般为 AnimatedFoo， 其中 Foo 是需要设置动画的属性。如果找不到符合自己需求的内置动画Widget，我们可以使用 TweenAnimationBuilder（补间动画生成器）创建自定义的隐式动画。

image.png

显示动画

如果你的选择是显示动画，那么你也可以尝试在 Flutter 框架中寻找符合 Widgets。Flutter 对显示动画的命名方式一般为FooTransition， 其中 Foo 是需要设置动画的属性（如SlideTransition）。如果找不到符合自己需求的内置动画Widget。你还有两种选择，创建独立的动画Widget（扩展AnimatedWidget），或者扩展Widget（使用AnimatedBuilder）。

如果在动画执行的过程中，碰到了性能的问题的话，我们可以考虑使用CustomPainter进行动画处理.

小结

以上我们了解了动画的类型以及如何选择创建动画方式。通过下面的动画决策树，可以帮助你选择最适合你的动画方式:

flutter_animation.png

当然动画的难易程度已从隐式动画、显式动画、自定义绘制CustomPainter递增。

难易度.png

.