lottie

HyperFrames 的 Lottie

HyperFrames 可通过其 lottie 运行时适配器控制 lottie-web 和 dotLottie 播放器的时间轴。Lottie 非常适用，因为动画时间轴已编码在资源中；HyperFrames 只需要一个可供其控制播放位置的播放器对象。

约定

• 从本地项目文件加载资源，通常存放在 assets/ 下。
• 设置 autoplay: false。
• 除非用户明确要求循环播放，否则优先设置 loop: false。
• 将返回的每个动画或播放器都注册到 window.__hfLottie。
• 使用 CSS 保持 Lottie 容器尺寸稳定。

适配器通过 goToAndStop(timeMs, false) 控制 lottie-web 的播放位置；对于 dotLottie，则根据播放器的形态使用帧或百分比 API。

lottie-web 模式

<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "assets/logo-reveal.json",
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(anim);
</script>

.lottie-layer {
  width: 100%;
  height: 100%;
}

dotLottie 模式

<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(player);
</script>

.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

多个动画

将每个播放器推入同一个注册表：

window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);

HyperFrames 会将它们全部控制到相同的合成时间点。

适用场景

• 已确认可通过 lottie-web 正确渲染的 After Effects 导出文件。
• Logo 显示动画、图标循环、装饰性点缀以及产品 UI 动效。
• 将 Remotion Lottie 用法转换为纯 HyperFrames HTML。

避免

• 在渲染时依赖远程 path URL。
• 使用 play() 开始播放。
• 假设 After Effects 中不受支持的效果在导出后仍能保留。请先在浏览器中测试 JSON 或 .lottie 文件。
• 异步加载播放器，并在 HyperFrames 验证已检查页面后才注册播放器。

验证

编辑 Lottie 合成后：

npx hyperframes lint
npx hyperframes validate

致谢与参考资料

• HyperFrames 适配器源码：packages/core/src/runtime/adapters/lottie.ts。
• Airbnb 的 lottie-web：https://github.com/airbnb/lottie-web
• lottie-web loadAnimation 选项：https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
• LottieFiles 的 dotLottie Web 播放器方法：https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods