滚动前行的轮子 — Flutter 交错动画应用实例

前言

之前一篇我们讲了 Flutter组合动画实现的方式 —— 交错动画,如需了解原理的可以查看下面这篇:用 Flutter 做出 GIF 动图效果
。借助 GIF 和绘图技巧是可以做到类似 GIF 那种效果的。本篇我们来一个应用实例,我们让轮子在草地滚动着前进,而且还能粘上“绿色的草”,运行效果如下动画所示。
滚动的轮子.gif

动画解析

上面实现的效果实际上有三个动画组成:

  • 轮子前进的动画
  • 轮子滚动
  • 轮子的边缘颜色渐变(由黑色变成绿色)

这三个动画是同时进行的,因此需要使用到交错动画,即使用一个 AnimationController来控制三个 Tween 对象实现上述的动画组合。

编码实现

首先是轮子组件的定义,为了让轮子转动的效果能够看到,我们给轮子填充了线性的渐变色,然后轮子的尺寸、旋转速度(time)和边框颜色由上级组件来控制。整个实现很简单,就是一个加了装饰的 Container 而已。

class Wheel extends StatelessWidget {
  final double size;
  fina

猜你喜欢

转载自blog.csdn.net/shuijian00/article/details/125359814