如何实现Lottie动画进入视口后延迟播放？

原代码问题分析 #

1. JS代码中visibility[0.1,1]存在语法错误，正确格式应为visibility: [0.1, 1]
2. HTML中的autoplay属性会导致动画自动播放，与自定义控制逻辑冲突，必须移除

修正后的实现方案 #

1. 调整HTML结构（移除autoplay）

<lottie-player id="lead" src="https://lottie.host/9af8230c-e744-48d9-b2d4-1aff06e464b8/tykFOU2onq.json" background="#ffffff" speed="1" style="width: 100%; height: 50vh;"></lottie-player>

2. 编写控制逻辑（结合LottieInteractivity与延迟）

// 获取Lottie播放器元素
const player = document.getElementById('lead');

// 初始化Lottie动画（禁用自动播放）
lottie.loadAnimation({
  container: player,
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'https://lottie.host/9af8230c-e744-48d9-b2d4-1aff06e464b8/tykFOU2onq.json'
});

// 配置视口交互与延迟播放
LottieInteractivity.create({
  player: '#lead',
  mode: 'scroll',
  actions: [
    {
      visibility: [0.1, 1], // 当元素10%以上进入视口时触发
      run: () => {
        // 延迟1000ms（1秒）后播放动画，可自行调整延迟时长
        setTimeout(() => {
          // 若需指定播放帧范围，使用playSegments；直接播放用player.play()
          player.seek(0);
          player.playSegments([0, 300], true);
        }, 1000);
      }
    }
  ]
});

关键说明 #

• visibility: [0.1, 1]表示当元素可见度达到10%到100%之间时触发回调
• setTimeout的第二个参数为延迟时间（单位：毫秒），可根据需求修改
• 使用playSegments([0, 300], true)可以精确控制动画从第0帧播放到第300帧，若只需完整播放动画，直接调用player.play()即可

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