lottie

HyperFrames 向け Lottie

HyperFrames は、lottie ランタイムアダプターを介して lottie-web と dotLottie の両方のプレイヤーをシークできます。アニメーションのタイムラインがアセットにすでに記録されているため、Lottie は最適な選択肢です。HyperFrames に必要なのは、シーク可能なプレイヤーオブジェクトだけです。

コントラクト

• アセットはローカルのプロジェクトファイルから読み込みます。通常は assets/ の下に配置します。
• autoplay: false を設定します。
• ユーザーがループを明示的に希望している場合を除き、loop: false を指定します。
• 返されたすべてのアニメーションまたはプレイヤーを window.__hfLottie に登録します。
• CSS で Lottie コンテナーのサイズを固定します。

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

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

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

複数のアニメーション

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

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

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

適した用途

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

避けること

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

検証

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

npx hyperframes lint
npx hyperframes validate

クレジットと参考資料

• HyperFrames アダプターのソース：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