Back to Details

animejs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Anime.js for HyperFrames

适用于HyperFrames的Anime.js

HyperFrames can seek Anime.js instances through its 
animejs
runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.
HyperFrames可通过其
animejs
运行时适配器来seek Anime.js实例。合成内容拥有动画对象，而HyperFrames拥有时钟控制权。

Contract

约定

  • Create animations or timelines synchronously during composition initialization.
  • Set 
    autoplay: false
    so Anime.js does not advance on its own clock.
  • Register every returned animation or timeline on 
    window.__hfAnime
    .
  • Use finite durations and loop counts.
  • Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.
The adapter seeks every registered instance with 
instance.seek(timeMs)
, where 
timeMs
is HyperFrames time in milliseconds.
  • 在合成初始化阶段同步创建动画或时间轴。
  • 设置
    autoplay: false
    ，让Anime.js不依赖自身时钟推进动画。
  • 将所有返回的动画或时间轴注册到
    window.__hfAnime
    上。
  • 使用有限的时长和循环次数。
  • 避免基于实时时钟、网络状态或无种子随机性来修改DOM的回调函数。
适配器会通过
instance.seek(timeMs)
来seek每个已注册的实例，其中
timeMs
是HyperFrames的时间（以毫秒为单位）。

Basic Pattern

基础模式

html
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: ".mark",
    translateX: 280,
    rotate: "1turn",
    opacity: [0, 1],
    duration: 1200,
    easing: "easeOutExpo",
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>
html
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: ".mark",
    translateX: 280,
    rotate: "1turn",
    opacity: [0, 1],
    duration: 1200,
    easing: "easeOutExpo",
    autoplay: false,
  });

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

Timeline Pattern

时间轴模式

html
<script>
  const tl = anime.timeline({
    autoplay: false,
    easing: "easeOutCubic",
  });

  tl.add({
    targets: ".title",
    translateY: [40, 0],
    opacity: [0, 1],
    duration: 650,
  }).add(
    {
      targets: ".accent",
      scaleX: [0, 1],
      duration: 450,
    },
    250,
  );

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(tl);
</script>
html
<script>
  const tl = anime.timeline({
    autoplay: false,
    easing: "easeOutCubic",
  });

  tl.add({
    targets: ".title",
    translateY: [40, 0],
    opacity: [0, 1],
    duration: 650,
  }).add(
    {
      targets: ".accent",
      scaleX: [0, 1],
      duration: 450,
    },
    250,
  );

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(tl);
</script>

Module Builds

模块构建

If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose 
seek()
, 
pause()
, and preferably 
play()
:
html
<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  const anim = animate(".chip", {
    x: "18rem",
    duration: 900,
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>
如果你使用ES模块构建，适配器不关心实例是如何创建的，只要求返回的对象暴露
seek()
、
pause()
方法，最好还能暴露
play()
方法：
html
<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  const anim = animate(".chip", {
    x: "18rem",
    duration: 900,
    autoplay: false,
  });

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

Good Uses

适用场景

  • Small SVG and DOM flourishes where Anime.js syntax is compact.
  • Imported Anime.js examples that can be made seek-driven.
  • Multiple independent micro-animations pushed into the same registry.
Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.
  • 在需要简洁语法实现小型SVG和DOM动效的场景中使用。
  • 可转换为seek驱动的Anime.js示例。
  • 将多个独立的微动画添加到同一个注册表中。
除非用户明确要求使用Anime.js，否则复杂场景序列建议使用GSAP。GSAP仍是HyperFrames的首选创作工具。

Avoid

注意事项

  • Leaving 
    autoplay
    at the Anime.js default.
  • Depending on 
    anime.running
    auto-discovery instead of explicit 
    window.__hfAnime.push(...)
    .
  • Infinite loops. Compute a finite repeat count from the composition duration.
  • Building animations in timers, promises, event handlers, or after async asset loads.
  • 不要保留Anime.js默认的
    autoplay
    设置。
  • 不要依赖
    anime.running
    自动发现，而要显式调用
    window.__hfAnime.push(...)
    。
  • 避免无限循环。根据合成时长计算有限的重复次数。
  • 不要在定时器、Promise、事件处理器中或异步资源加载完成后创建动画。

Validation

验证

After editing a composition that uses Anime.js:
bash
npx hyperframes lint
npx hyperframes validate
编辑使用Anime.js的合成内容后，请执行：
bash
npx hyperframes lint
npx hyperframes validate

Credits And References

致谢与参考