mcpField
A
animejs

animejs

github.com/heygen-com创意与媒体74.7k70.3k 次安装今天更新
代码仓库

关于 animejs

面向 HyperFrames 的 Anime.js 技能，指导将动画实例注册到运行时并由 HyperFrames 时间驱动，适用于 SVG 和 DOM 微动效。

主要功能

  1. 01通过 animejs 适配器定位动画实例
  2. 02关闭 autoplay 并注册实例
  3. 03要求动画使用有限时长和循环次数
  4. 04提供基础动画与时间线模式

适用场景

  1. 01制作 SVG 或 DOM 微动效
  2. 02将 Anime.js 示例改为时间驱动
  3. 03注册多个独立动画实例

安装

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

$npx skills add https://github.com/heygen-com/hyperframes --skill animejs

安装后在 Claude Code 中输入/animejs确认已加载。

详细介绍

Anime.js for HyperFrames

HyperFrames 可通过其 animejs 运行时适配器控制 Anime.js 实例的时间。组合负责动画对象；HyperFrames 负责时钟。

约定

  • 在组合初始化期间同步创建动画或时间线。
  • 设置 autoplay: false，避免 Anime.js 使用自己的时钟推进动画。
  • 将每个返回的动画或时间线注册到 window.__hfAnime。
  • 使用有限的时长和循环次数。
  • 避免使用依赖挂钟时间、网络状态或未设种子随机数来修改 DOM 的回调。

适配器通过 instance.seek(timeMs) 控制每个已注册的实例，其中 timeMs 是 HyperFrames 的时间，单位为毫秒。

基本模式

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

适用场景

  • Anime.js 语法简洁的 SVG 和 DOM 小型修饰动画。
  • 可以改为由时间驱动的 Anime.js 示例。
  • 将多个独立的微动画推入同一个注册表。

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

避免

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

验证

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

npx hyperframes lint
npx hyperframes validate

致谢与参考

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

评论

支持 Markdown