如何组合多个 Lottie 动画？

Question

有没有一种方法将多个Lottie动画合并为一个？ 我尝试了https://github.com/LottieFiles/lottie-js但失败了。 上述库提供了足够好的API来操作现有元素，但不允许组合动画。 是否有其他JavaScript库可以实现这一点？

- Anil Soni

---

请提供足够的代码，以便他人更好地理解或重现问题。 - Community

这里没有代码，只有一堆Lottie动画。我正在尝试通过代码将它们合并或排列成时间轴。目前我只是根据计时器显示和隐藏这些动画。 我想要的是将它们合并成一个单独的Lottie。 - Anil Soni

Answer 1

如果您想按顺序播放动画，可以使用Lottie-Interactivity。其中一种模式允许您按顺序播放动画，甚至从URL加载它们，因此您无需手动将动画粘合在一起。以下是来自LottieFiles网站的部分说明如何设置它： https://lottiefiles.com/interactivity#chainLoadExample 使用该库，您的设置如下：

LottieInteractivity.create({
    player: '#chainLoadPlayer',
    mode: 'chain',
    actions: [
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL'
    },
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL'
    },
    {
        state: 'autoplay',
        transition: 'onComplete',
        path: 'URL',
        reset: true
    }
    ]
});

- sam-osb

---

感谢你的回复，Sam。我的意图是将顺序动画导出为视频（在前端），而不仅仅是展示它。此外，可能还会有一些重叠的动画。如果我需要将动画延迟n秒，你能告诉我需要调整哪些属性吗？ - Anil Soni