animejs

FrameVideo 向けの Anime.js

使用する場面

次のような場合は Anime.js を使用します。

• 軽量なアニメーション — GSAP よりバンドルサイズが小さい場合（17KB 対 45KB）
• シンプルな DOM／SVG の動き — 要素の出現、変形、不透明度
• コンパクトな構文 — 直感的なアニメーションをすっきり記述できます
• Anime.js のサンプルを移植する場合 — ユーザーから提供された Anime.js コードを適応させる場合
• ファイルサイズに制約がある場合 — 1KB ごとの削減が重要な場合

使用しないでください

次のような場合は 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. 有限の duration を使用します

---

契約

• コンポジションの初期化中に、アニメーションまたはタイムラインを同期的に作成します。
• Anime.js が独自のクロックで進行しないよう、autoplay: false を設定します。
• 返されたすべてのアニメーションまたはタイムラインを window.__fvAnime に登録します。
• 有限の duration とループ回数を使用します。
• 実時間、ネットワーク状態、またはシードされていない乱数に基づいて 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 のサンプルのインポート。
• 同じレジストリに追加する、複数の独立したマイクロアニメーション。

ユーザーから明示的な指定がない限り、複雑なシーンのシーケンスには GSAP を使用してください。GSAP は引き続き、FrameVideo での主要な作成方法です。

避けること

• Anime.js のデフォルト設定のまま autoplay を使用すること。
• 明示的に window.__fvAnime.push(...) へ登録せず、anime.running による自動検出に依存すること。
• 無限ループ。コンポジションの duration から有限の繰り返し回数を計算してください。
• タイマー、プロミス、イベントハンドラー、または非同期アセットの読み込み後にアニメーションを作成すること。

検証

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。
• autoplay、pause()、seek() に関する Anime.js のドキュメント：https://animejs.com/documentation/