如何根据计时器控制Flutter / Flare动画效果？

Question

我要完成以下任务： 基于可变计时器（小时，分钟和秒），必须实现三个目标：已接收，准备和就绪。

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

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

位置：

• 第一行使用Flutter CustomPainter
• 第二行由 Flare 构成，请参见：https://www.2dimensions.com/a/JohanWalhout/files/flare/fill-line/embed

现在，我面临以下问题：

• 如何像Flure动画一样为Flutter CustomPainter 设置动画？

或：

• 如何对Flare动画进行动画处理，而动画持续时间是填充橙色所需的时间？

请在以下仓库中查看完整的应用程序：https://github.com/LiveLikeCounter/Flutter-Food-Delivery

Answer 1

Flare和CustomPainter是完全不同的两件事。 CustomPainter是Flutter SDK随附的小部件，Flare是2Dimensions的矢量动画工具。他们无法以任何方式相互更改/操纵。

  

如何在持续时间为动画的情况下对Flare动画进行动画处理   填充橙色所需的时间？

如果要坚持使用Flare，则可以单独创建填充动画，并在需要时使用FlareController播放动画。

只要记住您给它起的名字e.g In this case, it is 'home-on' and 'home-off'

在开始进行代码/设计之前，请参阅此博客：

  

https://medium.com/2dimensions/building-a-responsive-house-with-flare-flutter-31af823ba805

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

Answer 2

对于自定义绘画工具，您可以使用基本的canvas.drawLine并确保在更改结束线位置时您的shouldRepaint返回true。结束位置将相对于计时器以及您认为一行已满的位置。

对于Flare动画，您必须创建一个控制器，该控制器将占用您要设置动画的每个计时器刻度上的时间，然后将您的画板当前播放时间设置为等于该时间的位置。 15秒= 100％，因此您的应用时间应为整个animationDuration，将7.5设置为animationDuration * 0.5，因此您必须为此计算公式。

您可以从SmartFlare使用我的SwipeAdvanceController，然后使用代表您的“滑动”的Fake值调用updateSwipePosition。控制器将根据动画的滑动方式从动画的0％推进到100％，从而允许您使用Flare创建滑块等，因此控制器应该通过传递假触摸位置来进行仿真。