Flutter - 按顺序播放 2 个或更多 Lottie 文件

问题描述

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

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

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

谁能帮我解决一下？谢谢。

解决方法

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

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();
                        });
                      });

lottie lottie