Back to Details

lottie

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Lottie for HyperFrames

HyperFrames的Lottie集成方案

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.
HyperFrames可通过其
lottie
运行时适配器来控制
lottie-web
和dotLottie播放器。Lottie非常适合这种场景，因为动画时间轴已编码在资源中；HyperFrames只需要一个可被控制的播放器对象即可。

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.
  • 从本地项目文件加载资源，通常放在
    assets/
    目录下。
  • 设置
    autoplay: false
    。
  • 除非用户明确需要循环，否则优先设置
    loop: false
    。
  • 将每个返回的动画或播放器注册到
    window.__hfLottie
    上。
  • 使用CSS保持Lottie容器尺寸稳定。
适配器通过
goToAndStop(timeMs, false)
控制
lottie-web
，而dotLottie则根据播放器类型使用帧或百分比API进行控制。

lottie-web Pattern

lottie-web 使用模式

html
<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>
css
.lottie-layer {
  width: 100%;
  height: 100%;
}
html
<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>
css
.lottie-layer {
  width: 100%;
  height: 100%;
}

dotLottie Pattern

dotLottie 使用模式

html
<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>
css
.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
html
<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>
css
.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

Multiple Animations

多动画场景

Push each player into the same registry:
js
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.
将每个播放器推入同一个注册表：
js
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);
HyperFrames会将所有动画同步到相同的合成时间点。

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.
  • 已确认可在lottie-web中正确渲染的After Effects导出内容。
  • Logo展示、图标循环、装饰性动效以及产品UI动画。
  • 将Remotion中的Lottie用法转换为纯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.
  • 渲染时依赖远程
    path
    URL。
  • 使用
    play()
    启动播放。
  • 假设After Effects中不支持的特效在导出后仍能正常工作。请先在浏览器中测试JSON或
    .lottie
    文件。
  • 异步加载播放器并在HyperFrames验证完成页面后才注册实例。

Validation

验证步骤

After editing a Lottie composition:
bash
npx hyperframes lint
npx hyperframes validate
编辑Lottie合成内容后：
bash
npx hyperframes lint
npx hyperframes validate

Credits And References

致谢与参考