如何实现lottie-web动画逐次播放，前一个完成后再触发下一个？

问题说明 #

原代码使用同步遍历的方式调用lottie.play()，遍历逻辑不会等待动画播放完成就会执行下一轮，因此所有动画会同时触发，不符合顺序播放的要求。

核心实现逻辑 #

用索引指针记录当前播放位置，把下一个动画的播放触发逻辑绑定到当前动画的onComplete事件上，只有当前动画播放完成后才会启动下一个动画。你提问中提到的「是否需要单独注册每个动画的相关事件」的问题，答案是需要，但不需要手动逐个编写绑定逻辑，通过批量循环即可完成。

完整可运行代码 #

// 收集所有step节点
const steps = $('.step').toArray();
// 存储所有lottie实例，提前初始化避免播放时加载JSON产生延迟
const lottieInstances = [];
// 标记当前播放的动画索引
let currentPlayIndex = 0;

// 第一步：提前初始化所有lottie实例，关闭自动播放
steps.forEach(step => {
  const animationElement = $(step).find('.animation').get(0);
  const lottieInstance = bodymovin.loadAnimation({
    container: animationElement,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: animationElement.getAttribute('data-json')
  });
  lottieInstances.push(lottieInstance);
});

// 第二步：封装播放函数，触发指定索引的动画
function playStepAnimation(index) {
  // 索引超出实例数量，说明所有动画播放完成
  if (index >= lottieInstances.length) {
    console.log('全部动画播放完毕');
    return;
  }
  const currentInstance = lottieInstances[index];
  // 绑定当前动画的完成事件，结束后播放下一个
  currentInstance.onComplete = function() {
    console.log(`第${index + 1}个动画播放完成`);
    playStepAnimation(index + 1);
  }
  // 启动当前动画
  currentInstance.play();
}

// 第三步：启动播放，从第一个动画开始
playStepAnimation(currentPlayIndex);

可选优化 #

如果你的动画JSON文件较大，不需要提前全部加载，也可以把lottie实例化的逻辑放到playStepAnimation函数内，每次播放前再实例化加载对应动画，减少页面初始化时的请求压力。

内容的提问来源于stack exchange，提问作者dungey_140