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

开发者 · 2024-10-3 13:53:27

媒介

之前一篇我们讲了 Flutter组合动画实现的方式 —— 交织动画，如需相识原理的可以查察下面这篇：用 Flutter 做出 GIF 图片的结果。借助 GIF 和画图本领是可以做到雷同 GIF 那种结果的。本篇我们来一个应用实例，我们让轮子在草地滚动着进步，而且还能粘上“绿色的草”，运行结果如下动画所示。

动画剖析

上面实现的结果现实上有三个动画构成：

轮子进步的动画
轮子滚动
轮子的边沿颜色渐变（由黑色变成绿色）

这三个动画是同时举行的，因此必要使用到交织动画，纵然用一个 AnimationController来控制三个 Tween 对象实现上述的动画组合。
编码实现

起首是轮子组件的界说，为了让轮子转动的结果可以大概看到，我们给轮子添补了线性的渐变色，然后轮子的尺寸、旋转速率（time）和边框颜色由上级组件来控制。整个实现很简单，就是一个加了装饰的 Container 而已。

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品