360 Secure SkillHub
360 安全技能中心

Lottie

核心功能是为HyperFrames适配lottie-web和dotLottie播放器，需将动画实例注册到window.__hfLottie，让HyperFrames可统一控制动画时间轴。典型场景包括Logo揭示、图标动效、产品UI动效等，适配AE导出的合规动画。提供代码示例，支持本地动画文件（JSON/.lottie），可通过hyperframes命令校验，需规避异步加载等问题。

lucas-kay8
lucas-kay8
热度 19.57
最近更新 2026-05-22 15:09:00
分类：开发依赖：纯提示词应用场景：API 集成 / 代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add lottie
Metadata
name
lottie
description
Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.

Lottie for HyperFrames

HyperFrames can seek both lottie-web and dotLottie players through its lottie runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.

Contract

  • Load assets from local project files, usually under assets/.
  • Set autoplay: false.
  • Prefer loop: false unless the user explicitly wants a loop.
  • Register every returned animation or player on window.__hfLottie.
  • Keep the Lottie container dimensions stable with CSS.

The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.

lottie-web Pattern

<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 Pattern

<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;
}

Multiple Animations

Push each player into the same registry:

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

HyperFrames seeks them all to the same composition time.

Good Uses

  • After Effects exports that are already known to render correctly in lottie-web.
  • Logo reveals, icon loops, decorative accents, and product UI motion.
  • Translating Remotion Lottie usage into plain HyperFrames HTML.

Avoid

  • Relying on remote path URLs at render time.
  • Starting playback with play().
  • Assuming unsupported After Effects effects will survive export. Test the JSON or .lottie file in a browser first.
  • Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page.

Validation

After editing a Lottie composition:

npx hyperframes lint
npx hyperframes validate

Credits And References