Flutter 如何基于计时器控制颤振/耀斑动画？

我想做到以下几点： 根据可变计时器（小时、分钟和秒），必须实现三个目标：接收、准备和准备

示例：当计时器大约为15秒时，线条和圆点必须用橙色填充——以线性方式填充

到目前为止，我已经做到了这一点：

其中：

• 第一行是用flatterCustomPainter
• 第二行由Flare组成，请参见：

现在，我面临以下问题：

• 如何像Flare动画一样设置颤振自定义画师的动画

或：

• 如果动画持续时间是填充橙色所需的时间，如何设置Flare动画的动画

---

请参阅以下报告中的完整应用程序：

Flare和CustomPainter是两个完全不同的东西。CustomPainter是颤振SDK附带的一个小部件，Flare是一个二维矢量动画工具。他们不能以任何方式改变/操纵彼此

在动画持续时间为的情况下，如何设置Flare动画的动画 填充橙色所需的时间

如果要坚持使用Flare，则可以单独创建填充动画，并使用

FlareController

在需要时播放动画

记住你给它起的名字

在开始编码/设计之前，请参阅本博客：

---

但是，仍然建议您使用AnimationController和一些变量来完全控制您的小部件，而不是依赖任何第三方动画工具。

对于自定义画师，您可以使用基本的

画布。绘制线

，并确保当端点位置发生更改时，您的shouldRepait返回true。结束位置将与计时器有关，以及你认为一条线要满。

对于Flare动画，您必须创建一个控制器，该控制器将在您要设置动画的每个计时器刻度上占用时间，然后将artboard的当前播放时间设置为您希望该时间的位置。15秒=100%在您的情况下，因此应用的时间应该是完整的animationDuration，7.5您将其设置为animationDuration*0.5，因此您必须计算出相应的公式

您可以使用my SwipeAdvanceController，然后使用表示您的“刷卡”的假值调用UpdateSweepPosition。控制器将从动画的0%前进到100%，这取决于您在动画上滑动的方式，允许您使用Flare创建滑块等，因此它应该通过传递假触摸位置来进行模拟