用 Flutter 做出 GIF 动图效果

前言

我们之前介绍了不少有关动画的篇章，具体可以查看《Flutter 动画专题》动画相关的篇章，或者下载动画源码查看相关示例。前面介绍的动画都是只有一个动画效果，那如果我们想对某个组件实现一组动效，比如下面的效果，该怎么办？

这个时候我们需要用到组合动效， Flutter 提供了交错动画（Staggered Animation）的方式实现。对于多个 Anmation 对象，可以共用一个 AnimationController，然后在不同的时间段执行动画效果。这就有点像 GIF 图片一样，一帧帧图像播放实现连续的动画。

交错动画机制

交错动画的实现基于以下几个要点：

• 所有的 animation对象使用同一个 AnimationController 驱动；
• 不管实际动画持续的时间长度多长，动画控制器 controller 的值必须在0-1之间；
• 每个动画对象都有一个0-1范围内的间隔（Interval）;
• 在间隔时间内，Tween