animejs

HyperFrames 向け Anime.js

HyperFrames は、animejs ランタイムアダプターを通じて Anime.js のインスタンスをシークできます。コンポジションはアニメーションオブジェクトを管理し、HyperFrames はクロックを管理します。

契約

• コンポジションの初期化中に、アニメーションまたはタイムラインを同期的に作成します。
• Anime.js が独自のクロックで進行しないよう、autoplay: false を設定します。
• 返されたすべてのアニメーションまたはタイムラインを 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 を使用してください。HyperFrames の主要なオーサリング手段は引き続き GSAP です。

避けること

• Anime.js のデフォルトのまま autoplay を使用すること。
• 明示的な window.__hfAnime.push(...) ではなく、anime.running の自動検出に依存すること。
• 無限ループ。コンポジションの再生時間に基づいて、有限のリピート回数を計算してください。
• タイマー、プロミス、イベントハンドラー、または非同期のアセット読み込み後にアニメーションを構築すること。

検証

Anime.js を使用するコンポジションを編集した後は、次を実行してください。

npx hyperframes lint
npx hyperframes validate

クレジットと参考資料

• HyperFrames アダプターのソース：packages/core/src/runtime/adapters/animejs.ts。
• autoplay、pause()、seek() に関する Anime.js のドキュメント：https://animejs.com/documentation/