animejs

FrameVideo 的 Anime.js

适用场景

以下情况适合使用 Anime.js：

• 轻量动画 — 包体积小于 GSAP（17KB 对比 45KB）
• 简单的 DOM/SVG 动效 — 元素入场、变换、不透明度
• 精简语法 — 编写简单动画时更简洁
• 移植 Anime.js 示例 — 用户提供了需要改编的 Anime.js 代码
• 文件体积受限 — 每 KB 都很重要时

不要使用

以下情况请避免使用 Anime.js：

• 复杂的时间轴编排 — GSAP 的时间轴控制和标签功能更好
• 默认选项 — 除非有特定理由使用 Anime.js，否则请使用 gsap
• 3D 或 WebGL — 使用 three
• 纯 CSS 装饰 — 使用 css-animations
• GPU 着色器 — 使用 typegpu

---

快速入门

在 FrameVideo 中使用 Anime.js 实现基本动画：

<div class="clip" data-start="0" data-duration="3">
  <div class="mark">Animate me</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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,  // REQUIRED for FrameVideo
  });

  window.__fvAnime = window.__fvAnime || [];
  window.__fvAnime.push(anim);  // Register for seeking
</script>

要点：

1. 设置 autoplay: false
2. 在 window.__fvAnime 数组中注册
3. 使用有限时长

---

使用约定

• 在合成初始化期间同步创建动画或时间轴。
• 设置 autoplay: false，避免 Anime.js 根据自身时钟推进动画。
• 将每个返回的动画或时间轴注册到 window.__fvAnime。
• 使用有限的时长和循环次数。
• 避免使用根据墙上时钟、网络状态或未设种子的随机性修改 DOM 的回调。

适配器会通过 instance.seek(timeMs) 跳转到每个已注册实例的位置，其中 timeMs 是以毫秒为单位的 FrameVideo 时间。

基本模式

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.__fvAnime = window.__fvAnime || [];
  window.__fvAnime.push(anim);
</script>

时间轴模式

<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.__fvAnime = window.__fvAnime || [];
  window.__fvAnime.push(tl);
</script>

模块构建

如果使用 ES 模块构建，适配器不关心实例的创建方式。它只要求返回的对象提供 seek()、pause()，并且最好提供 play()：

<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

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

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

适用场景

• Anime.js 语法简洁的轻量 SVG 和 DOM 点缀动画。
• 可以改为由跳转驱动的导入 Anime.js 示例。
• 将多个互不相关的微动画推送到同一个注册表中。

除非用户明确要求使用 Anime.js，否则复杂的场景编排请使用 GSAP。GSAP 仍然是 FrameVideo 的主要创作方式。

避免事项

• 保留 Anime.js 默认的 autoplay 设置。
• 依赖 anime.running 自动发现动画，而不显式调用 window.__fvAnime.push(...)。
• 使用无限循环。请根据合成时长计算有限的重复次数。
• 在计时器、Promise、事件处理程序或异步资源加载完成后构建动画。

验证

编辑使用 Anime.js 的合成后：

npx framevideo lint
npx framevideo validate

验证

编写 Anime.js 动画后：

npx framevideo lint      # Check registration
npx framevideo validate  # Check runtime errors
npx framevideo preview   # Scrub timeline to verify seekability

手动检查：

1. 注册 — 确认所有动画都已推送到 window.__fvAnime
2. 禁用自动播放 — 所有动画都设置了 autoplay: false
3. 有限循环 — 不使用无限的 loop: true，改用指定循环次数
4. 可跳转 — 拖动预览时间轴，动画在任意帧都能保持正确状态

致谢与参考

• FrameVideo 适配器源码：packages/core/src/runtime/adapters/animejs.ts。
• Anime.js 中关于 autoplay、pause() 和 seek() 的文档：https://animejs.com/documentation/