本文介绍如何通过 lottie-player 组件控制动画播放行为，使其仅播放一次并在 logo 完整呈现后精准停驻，避免循环重播，实现“动画启动 → 完成定格 → 静态展示”的专业视觉效果。
Lottie 动画默认常以循环（loop）方式播放，但实际场景中（如品牌 Logo 启动动画），我们往往需要它只播放一次，并在关键帧（例如 Logo 完全展开/渲染完成的时刻）自动停止并保持静止，而非反复重播或直接跳回起始帧。
使用 <lottie-player> Web Component 时，关键在于正确配置其属性：
- ✅ loop="false"：禁用循环（注意：应写为 loop="false" 或 loop={false}，HTML 属性建议用字符串形式 loop="false"，而非 JSX 语法）；
- ✅ 移除 autoplay：若需首次加载即播放，应配合 JavaScript 手动触发；若保留 hover，则 autoplay 会与 hover 冲突（hover 本身已隐含悬停时自动播放逻辑）；
- ✅ 添加 direction="1"（可选）确保正向播放；
- ✅ 如需更精细控制（如停在第 90 帧而非结尾），需借助 JavaScript API 调用 setDirection(0) + play() + stop()，但对“播放一次后定格”场景，loop="false" 已足够。
✅ 推荐修正后的 HTML 代码如下：
<lottie-player src="https://lottie.host/afffd6d7-bf1f-46e1-8593-0bbe2f99ca00/ONeoa9me40.json" background="transparent" loop="false" speed="1" style="width: 70px; height: 120px;" hover> </lottie-player>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- loop="false" 必须作为 HTML 属性显式声明（不要写成 :loop="false" 或 {loop:false}，除非在 Vue/React 等框架中）；
- hover 属性已内置“悬停开始播放、移出自动暂停”逻辑，无需额外 JS；
- 若动画本身在 JSON 中设置了 loop: true，loop="false" 属性仍会覆盖其行为；
- 若需确保首次加载即播放（非仅悬停触发），可添加 autoplay 并移除 hover，但此时需搭配 loop="false" 才能实现单次播放后定格。
最终效果：页面加载时动画自动播放一次，结束后静止在最后一帧（即 Logo 完整状态）；用户悬停时再次播放一次，离开后仍停驻于完成态——完美兼顾动态引入与静态识别需求。
