lottie

FrameVideo 用 Lottie

使用する場面

次の用途では Lottie を使用します。

• After Effects の書き出し — デザイナーから .json または .lottie ファイルが提供される場合
• ロゴアニメーション — アニメーション付きのブランドマークやアイコン
• 既成アニメーション — LottieFiles ライブラリのアセットを使用する場合
• 複雑なベクターモーション — シェイプの変形、パスアニメーション
• デザインの引き継ぎ — デザイナーが AE で作業し、開発者が直接組み込む場合

使用しないでください

次の用途では Lottie を避けてください。

• コード駆動のアニメーション — gsap を使用してください（より柔軟です）
• シンプルな変形 — gsap または css-animations を使用してください（より軽量です）
• 3D シーン — three を使用してください
• テキスト主体のアニメーション — Lottie はテキストの扱いが苦手なため、HTML + GSAP を使用してください
• 動的コンテンツ — Lottie アニメーションは静的なため、プログラムによるアニメーションを使用してください

---

クイックスタート

基本的な lottie-web アニメーション：

<div id="logo-lottie" class="lottie-layer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,        // REQUIRED for FrameVideo
    autoplay: false,    // REQUIRED for FrameVideo
    path: "assets/logo-reveal.json",
  });

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

<style>
  .lottie-layer { width: 100%; height: 100%; }
</style>

重要なポイント：

1. autoplay: false と loop: false を設定します
2. window.__fvLottie 配列に登録します
3. リモート URL ではなく、ローカルの assets/ から読み込みます

---

契約

• アセットはプロジェクト内のローカルファイルから読み込みます。通常は assets/ 以下に配置します。
• autoplay: false を設定します。
• ユーザーが明示的にループを希望しない限り、loop: false を優先します。
• 返されたすべてのアニメーションまたはプレーヤーを window.__fvLottie に登録します。
• CSS で Lottie コンテナーの寸法を安定させます。

アダプターは goToAndStop(timeMs, false) を使って lottie-web をシークし、プレーヤーの形状に応じてフレームまたはパーセンテージ API を使って dotLottie をシークします。

lottie-web のパターン

<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "assets/logo-reveal.json",
  });

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

.lottie-layer {
  width: 100%;
  height: 100%;
}

dotLottie のパターン

<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });

  window.__fvLottie = window.__fvLottie || [];
  window.__fvLottie.push(player);
</script>

.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

複数のアニメーション

各プレーヤーを同じレジストリーに追加します。

window.__fvLottie = window.__fvLottie || [];
window.__fvLottie.push(backgroundAnim);
window.__fvLottie.push(iconAnim);
window.__fvLottie.push(confettiAnim);

FrameVideo はすべてのプレーヤーを同じコンポジション時刻にシークします。

適した用途

• lottie-web で正しくレンダリングされることが確認済みの After Effects 書き出し。
• ロゴの表示、アイコンのループ、装飾的なアクセント、製品 UI のモーション。
• Remotion での Lottie の使用を、通常の FrameVideo HTML に置き換える場合。

避けること

• レンダリング時にリモートの path URL に依存すること。
• play() で再生を開始すること。
• サポートされていない After Effects のエフェクトが書き出し後も維持されると想定すること。まずブラウザーで JSON または .lottie ファイルをテストしてください。
• FrameVideo の検証でページがすでに検査された後に、プレーヤーを非同期で読み込み、登録すること。

検証

Lottie コンポジションを編集した後：

npx framevideo lint
npx framevideo validate

クレジットと参考資料

• FrameVideo アダプターのソース：packages/core/src/runtime/adapters/lottie.ts。
• Airbnb による lottie-web：https://github.com/airbnb/lottie-web
• lottie-web の loadAnimation オプション：https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
• LottieFiles による dotLottie Web プレーヤーのメソッド：https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods