mcpField
L
lottie

lottie

github.com/boraoztunc创意与媒体434191 次安装11 周前更新
代码仓库

关于 lottie

介绍如何在 HyperFrames 作品中使用 Lottie 动画，涵盖可寻址的 lottie-web 和 dotLottie 播放器，以及本地资源、时间线同步和验证方法。

主要功能

  1. 01支持 lottie-web 与 dotLottie 播放器
  2. 02注册播放器以便时间线定位
  3. 03同步多个动画
  4. 04说明本地资源与播放设置
  5. 05提供 lint 和验证步骤

适用场景

  1. 01在作品中加入 Logo 展示动画
  2. 02添加动态图标或装饰动画
  3. 03将 Remotion Lottie 用法改为 HyperFrames HTML

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill lottie

安装后在 Claude Code 中输入/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

致谢与参考资料

评论

支持 Markdown