mcpField
A
animejs

animejs

github.com/boraoztunc创意与媒体434197 次安装11 周前更新
代码仓库

关于 animejs

animejs 是用于让 HyperFrames 按时间定位 Anime.js 实例的技能，说明了同步初始化、显式注册和有限动画设置，适用于使用 Anime.js 的合成。

主要功能

  1. 01定位已注册的 Anime.js 实例
  2. 02使用毫秒表示的 HyperFrames 时间
  3. 03要求同步创建动画
  4. 04通过 window.__hfAnime 注册实例
  5. 05提供 lint 和验证命令

适用场景

  1. 01将 Anime.js 示例改为按时间定位播放
  2. 02添加小型 SVG 或 DOM 动效
  3. 03在同一注册表中管理独立微动画

安装

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

$npx skills add https://github.com/boraoztunc/skills --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