FlareActor get/set .flr 动画在 Flutter 小部件中显示时的持续时间

Question

我正在使用 Flutter 创建一个自定义 TextView 小部件，我想在其中显示手写数字的动画，这样看起来文本是手写的。
我使用 60 fps 和 00:00:50 (500ms) 的持续时间为每个带有光晕的数字创建了动画。
当处理多个数字时，动画必须从左到右顺序播放。 IE。第二个数字的动画应该在第一个数字的动画结束后才开始。

第二点是，实际手写时，每个数字的书写时间是不同的。例如。写“1”的时间不如写“5”的时间长。

到目前为止，我使用定时器 class 使用了 700 毫秒的硬编码延迟。例如。当写入数字“18”时，首先启动“1”的动画，然后等待 700 毫秒后，启动“8”的动画，依此类推。问题是动画序列看起来仍然不自然，在尝试不同的延迟值之后也不自然。

手写“1”动画的用法示例：

FlareActor(
  "assets/animations/hw_1.flr",
  alignment: Alignment.center,
  fit: BoxFit.fitHeight,
  animation: firstAnimationState,
)

两个连续动画的开始：

setState(() {
  // start first animation
  firstAnimationState = "write";
});

Timer(const Duration(milliseconds: 700), () {
  setState(() {
    // start second animation
    secondAnimationState = "write";
  });
});

在我的小部件中同步数字动画以及在彼此之间同步完整的 TextView 应该很容易。

在 Flutter 中有没有办法以编程方式（在 FlareActor 中）检索动画的持续时间，或者可以提前设置播放动画的持续时间？

Answer 1

您可以连接到 FlareActor 小部件的 completed 事件，然后播放下一个动画。

FlareActor get/set .flr 动画在 Flutter 小部件中显示时的持续时间

FlareActor get/set duration of a .flr animation when showing in a Flutter widget

flare

flutter