Flutter - 依次播放 2 个或更多 Lottie 文件答案

【问题标题】：Flutter - Play 2 or more Lottie files in sequenceFlutter - 依次播放 2 个或更多 Lottie 文件
【发布时间】：2021-04-14 18:10:28
【问题描述】：

我想按顺序播放 2 个 Lottie 文件，即在一个 Lottie 完成动画后，它应该播放第二个 Lottie 文件。

我尝试通过将statuslistener（通过 AnimationController）添加到 Lottie 小部件并在第一个 Lottie 完成其动画后对资产文件调用 setstate() 来实现此目的。它确实有效，但在切换到下一个 Lottie 文件时出现了延迟。

void statusListener(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      setState(() {
        asset = asset2;
      });
      controller.reset();
      controller.forward();
    }
  }

谁能帮我弄清楚？谢谢。

【问题讨论】：

你也可以通过创建函数来实现，当第一个 Lottie 完成时调用第二个函数，其中包含第二个 Lottie 动画代码
@AR 是的，我试过了。延迟问题仍然存在，因为我必须更换 Lottie 小部件。

标签： flutter lottie

【解决方案1】：

为两个动画定义两个不同的控制器。然后播放第一个动画并暂时隐藏第二个动画。第一个动画完成后，通过可见性隐藏它。例如：

Visibility(
  child: Text("Gone"),
  visible: false,
),

更多详情请参考：stackoverflow : how to hide widget programmatically

然后播放第二个动画并隐藏第一个动画。对于时间延迟，请使用Future.delayed。这将在您选择的特定时间后执行代码。例子：假设您的第一个动画在2 seconds 完成，那么您将在 2 秒后播放下一个动画，以便在 2 秒后执行下一行代码。

Future.delayed(const Duration(seconds: 2), () {
                        setState(() {
                          _controller.forward();
                        });
                      });

【讨论】：