Lottie

对于 HyperFrames 的 Lottie HyperFrames 可以通过其 Lottie 运行时适配器寻找 lottie-web 和 dotLottie 播放器。Lottie 是一个很好的选择，因为动画时间轴已经在资产中编码；HyperFrames 只需要一个可以寻找的播放器对象。 合同 从本地项目文件（通常在 assets/ 下）加载资产。 设置 autoplay: false。 除非用户明确想要循环，否则更喜欢 loop: false。 在 window.__hfLottie 上注册每个返回的动画或播放器。 使用 CSS 保持 Lottie 容器的尺寸稳定。 适配器使用 goToAndStop(timeMs, false) 寻找 lottie-web，并使用 frame 或 percentage APIs（取决于播放器形状）寻找 dotLottie。 lottie-web 模式

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

dotLottie 模式

.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 会将它们全部寻找到同一个组合时间。 良好的用途 After Effects 导出的文件已经知道可以在 lottie-web 中正确渲染。 Logo 展示、图标循环、装饰性强调和产品 UI 动作。 将 Remotion Lottie 用法转换为普通 HyperFrames HTML。 避免 在渲染时依赖远程路径 URL。 使用 play() 开始播放。 假设不支持的 After Effects 效果会在导出后幸存。 首先在浏览器中测试 JSON 或 .lottie 文件。 异步加载播放器并在 HyperFrames 验证已经检查页面后注册它。 验证 编辑 Lottie 组合后：

npx hyperframes lint
npx hyperframes validate

鸣谢和参考 HyperFrames 适配器源码： packages/core/src/runtime/adapters/lottie.ts。 lottie-web 由 Airbnb 提供： https://github.com/airbnb/lottie-web lottie-web loadAnimation 选项： https://github.com/airbnb/lottie-web/wiki/loadAnimation-options dotLottie web 播放器方法由 LottieFiles 提供： https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods