如何在HTML中让Lottie动画停在特定帧以保持固定logo状态？

单纯依赖lottie-player的HTML属性无法实现「播放完成/鼠标离开后停在特定帧」的需求，需要结合JavaScript来控制动画状态，具体实现步骤如下：

• 给lottie-player添加唯一ID，方便进行DOM操作
• 监听动画的complete事件，首次播放完成后跳转到logo完整显示的目标帧并暂停
• 监听mouseleave事件，鼠标离开动画区域时同样跳转到目标帧并暂停
• 提前确认动画中logo完整显示的帧编号（可通过Lottie预览工具查看）

修改后的完整代码示例：

<lottie-player 
  id="logoLottie"
  src="https://lottie.host/afffd6d7-bf1f-46e1-8593-0bbe2f99ca00/ONeoa9me40.json" 
  background="transparent" 
  speed="1" 
  style="width: 70px; height: 120px;" 
  hover autoplay
></lottie-player>

<script>
const lottiePlayer = document.getElementById('logoLottie');
// 替换为你的动画中logo完整显示的实际帧编号
const targetFrame = 60;

// 首次播放完成后停在目标帧
lottiePlayer.addEventListener('complete', () => {
  lottiePlayer.goToAndStop(targetFrame, true);
});

// 鼠标离开时停在目标帧
lottiePlayer.addEventListener('mouseleave', () => {
  lottiePlayer.goToAndStop(targetFrame, true);
});
</script>

关键说明： #

• goToAndStop(targetFrame, true) 方法的第二个参数设为true，表示立即跳转到目标帧并暂停，不会产生过渡动画
• 必须替换代码中的targetFrame值为你动画里的实际帧号：打开你的Lottie JSON文件，播放到logo完全显示的状态，记录对应的帧编号即可
• 保留了原有的hover和autoplay属性，确保页面加载时自动播放一次，鼠标悬停时重新触发播放

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