当前位置：首页 > 文章列表 > 文章 > 前端 > Lottie动画指定帧暂停方法详解

Lottie动画指定帧暂停方法详解

2026-04-02 12:00:23 0浏览收藏

本文深入解析了如何通过简单配置 lottie-player 的 `loop="false"` 与 `hover` 属性组合，配合合理的动画设计（最后一帧即为完整 Logo 状态），实现 Lottie 动画“播放一次后精准定格在完成态”的专业效果——无需复杂 JS 就能告别循环重播、避免 autoplay 冲突，让动态 Logo 在用户悬停时流畅演绎、自然静止，既保留动效感染力，又确保品牌标识的稳定性和视觉一致性，是提升网页交互质感与设计专业度的轻量级高效方案。

如何让 Lottie 动画在指定帧精准暂停并保持静态展示

本文详解如何通过配置 lottie-player 属性与 JavaScript 控制，使 Lottie 动画仅播放一次并在 Logo 完整呈现后精确停驻，避免循环重播，实现“动画启动→定格为静态图标”的专业视觉效果。

本文详解如何通过配置 `lottie-player` 属性与 JavaScript 控制，使 Lottie 动画仅播放一次并在 Logo 完整呈现后精确停驻，避免循环重播，实现“动画启动→定格为静态图标”的专业视觉效果。

Lottie 动画因其轻量、可交互和高保真矢量渲染，被广泛用于品牌 Logo 的动态呈现。但默认行为（如 autoplay + hover）易导致动画反复播放，破坏静态标识的稳定性。要实现“首次加载/悬停时完整播放一次，结束后精准停在最后一帧（即 Logo 成形状态）”，仅靠 HTML 属性即可高效达成，无需复杂脚本。

✅ 正确配置：禁用循环 + 移除自动播放触发

核心在于两点：

关闭循环（loop="false"）：防止动画播放完毕后从头重放；
分离播放控制逻辑：移除 autoplay 属性，改用 hover 触发播放，同时确保播放完成后自然停驻在终点帧。

修改后的标准代码如下：

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

⚠️ 注意：autoplay 属性必须完全移除。若同时存在 autoplay 和 hover，部分浏览器可能在页面加载时立即触发播放，导致无法精准控制起止点；而仅保留 hover，可确保动画只在用户交互（悬停）时启动，并在单次播放结束后自动停在最后一帧（Lottie Player 默认行为：非循环动画播放完毕即暂停于 frameCount - 1）。

? 补充说明：为何能“自动停在完成态”？

Lottie Player 在 loop="false" 模式下，播放至最后一帧（即 totalFrames - 1）时会自动暂停，不会跳回第 0 帧。只要你的动画设计是“从动效过渡到静态 Logo 完整显示”，那么最后一帧天然就是你期望的定格画面——无需额外调用 setProgress() 或监听 complete 事件。

✅ 进阶控制（按需选用）

若需更精细控制（例如强制停在第 120 帧而非末帧），可结合 JavaScript：

<lottie-player 
  id="logo-lottie" 
  src="..." 
  loop="false" 
  hover 
  style="width:70px;height:120px;">
</lottie-player>

<script>
  const player = document.getElementById('logo-lottie');
  // 监听播放结束，显式暂停（增强兼容性）
  player.addEventListener('complete', () => {
    player.pause();
  });
  // 或手动设置到指定进度（0.0 ~ 1.0）
  // player.addEventListener('load', () => {
  //   player.setDirection(1).play();
  //   setTimeout(() => player.goToAndStop(120, true), 1000);
  // });
</script>