如何在 HTML 中让 Lottie 动画在指定帧停止（如完成态 Logo）

通过禁用循环、结合 `autoplay` 与 `hover` 属性，并利用 lottie player 的 `seek()` 或 `gotoandstop()` 方法，可精准控制动画在 logo 完成帧处静止显示，实现“播放即定格”的视觉效果。

Lottie Player 默认的 autoplay + hover 组合虽能触发动画，但若未显式终止，动画会在循环模式下反复重播，或在非循环模式下停在最后一帧——但最后一帧未必是设计所需的“完成态”（例如动画可能有收尾回退、透明度渐变等）。因此，仅设置 loop=”false”（或 loop={false}）并不足够，还需主动控制播放进度。

✅ 正确做法分两步：

1. 禁用自动循环，移除 autoplay（避免页面加载时立即播放）
   改为通过 javaScript 手动控制首次播放与悬停播放，并在动画结束时精准跳转到目标帧（如第 n 帧，对应 Logo 完全呈现的时刻）。

2. 使用 lottie-player 提供的 API 实现帧级控制
   lottie-player 元素暴露了 player 实例（可通过 document.querySelector(‘lottie-player’).player 获取），支持以下关键方法：

   • goToAndStop(frame, isFrameNumber)：跳转并停在指定帧（isFrameNumber=true 表示传入的是帧号；false 表示时间秒数）
   • setDirection(1) / play() / pause()：配合控制流向

? 示例代码（推荐方案）：

立即学习“前端免费学习笔记（深入）”；

json"    background="transparent"    speed="1"    style="width: 70px; height: 120px;"   loop="false"   hover="false"  >  

⚠️ 注意事项：

• 务必确认完成帧号：打开 LottieFiles 或使用 vs code 插件预览 json，观察动画何时“Logo 完全静止”，记录对应帧号（animationData.op 或导出时的 frame 时间轴）。
• loop=”false” 是必要前提，否则 complete 事件不会触发。
• 若使用 hover 属性，其行为不可编程干预，故建议关闭 hover=”false” 并用 mouseenter/mouseleave 手动接管。
• 首次加载时添加 window.addEventListener(‘load’) 而非 DOMContentLoaded，确保资源（如 Lottie JSON）已就绪。

? 总结：loop=”false” 解决循环问题，但真正实现“停在指定 Logo 完成态”的核心在于 goToAndStop() + 事件监听。这是专业品牌展示中提升视觉一致性的关键实践。