0

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

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

到目前为止，我使用 Timer 类使用了 700 毫秒的硬编码延迟。比如写数字“18”时，先启动“1”的动画，等待700ms后启动“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 中）检索动画的持续时间，或者可以提前设置播放动画的持续时间？

4

1 回答 1

1

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

于 2019-10-12T12:12:05.887 回答