mcpField
L
lottie-animation-delivery

lottie-animation-delivery

github.com/calesthioデザイン・UI219103 回インストール15 週間前に更新
リポジトリ

lottie-animation-delivery について

Lottieのベクターアニメーションを対象プレーヤーやプラットフォームへ納品するための制作スキルです。互換性確認、書き出し形式、アセット管理、再生検証を扱います。

主な機能

  1. 01対象プレーヤーの互換性マトリクス作成
  2. 02After Effects書き出しの準備
  3. 03グリフ化とランタイムテキストの選択
  4. 04JSONまたはdotLottieアセットのパッケージ化
  5. 05再生とフレームキャプチャの検証

活用シーン

  1. 01アニメーション機能と対象プレーヤーの互換性確認
  2. 02ローカライズ用テキストとフォントの準備
  3. 03複数プレーヤー向けアセットのパッケージ化
  4. 04動画用の決定論的なアニメーションフレーム取得

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/calesthio/generative-media-skills --skill lottie-animation-delivery

インストール後、Claude Code で/lottie-animation-deliveryを入力して読み込まれたか確認します。

同梱ファイルEVAL.md

詳細

Lottie アニメーションの配信

デザインされたベクターアニメーションを、Web、モバイル、アプリケーション、またはレンダリング済み動画のプレイヤーで確実に再生する必要がある場合に、このスキルを使用してください。制作上の課題は相互運用性です。実装ごとに対応機能が異なる中で、意図した動き、タイポグラフィ、アセット、タイミング、アクセシビリティ、制御を維持する必要があります。

Lottie は万能な After Effects レンダラーではありません。ターゲットプレイヤーの対応状況は、アニメーションの書き出し後に初めてテストするものではなく、仕上げる前に検討事項として扱ってください。

根拠と変動性

  • 公式ドキュメントに記載された事実： 公式 Lottie 仕様、lottie-web、dotLottie 仕様、W3C、またはブラウザーのドキュメントに記載された動作です。
  • 制作上のヒューリスティック： 実用的なデフォルトですが、ターゲットプレイヤーとデザインに照らしてテストする必要があります。
  • 実測結果： 書き出したファイル、プレイヤーのフィクスチャ、デバイス、フレームキャプチャ、または最終成果物から測定した結果です。

事実は 2026-07-12 時点で確認されています。公式 Lottie 仕様は、現在も作業中の仕様であると説明されています。プレイヤーの機能対応状況、書き出しオプション、dotLottie のバージョン、ステートマシン、テーマ、パッケージ API は変更される可能性があります。正確な書き出しツールとプレイヤーのバージョンを記録し、最新のドキュメントを再確認してください。

Lottie が適しているか判断する

次のような成果物には Lottie を使用してください。

  • コンパクトで拡大・縮小可能なベクターアニメーションが役立つ。
  • ターゲットが対応するキーフレーム、シェイプ、プリコンポジション、画像、テキスト、マスク、またはトラックマットが含まれる。
  • ランタイム再生、シーク、マーカー、セグメント、または状態変更が必要である。
  • 対応する複数のプレイヤーで再利用する。
  • コンテナに合わせたレスポンシブな拡大・縮小が必要である。
  • 別の動画コンポジターに決定論的なフレームキャプチャを行う。

次の場合は、別の形式を選択してください。

  • 実写、動画レイヤー、写真効果、またはピクセル処理が中心である。
  • アニメーションアセットの契約に音声が含まれる。
  • 必要な AE 機能がターゲットプレイヤーで維持されない。
  • ランタイム制御よりも正確なオフラインレンダリングが重要である。
  • 3D カメラ、ライティング、パーティクル、シミュレーション、またはシェーダーの動作が、実証済みのプレイヤー対応範囲を超える。
  • シンプルな CSS/SVG トランジションのほうが保守しやすい。

公式ドキュメントに記載された事実： 公式 lottie-web README の AE Feature Support セクションには、Bodymovin の書き出し／プレイヤー経路では動画、音声、画像シーケンスがサポートされないと記載されています。ホストコンポジションでは、音声を別途同期するメディアアセットとして扱ってください。

まず配信マトリックスを確定する

次の項目を記録してください。

  • 元のコンポジション、サイズ、フレームレート、イン／アウト範囲、承認済みのリファレンスレンダー。
  • 正確なターゲットプレイヤー、バージョン、レンダラー、ブラウザー／デバイス、ホストフレームワーク。
  • JSON と .lottie のどちらを納品するか、および必要な dotLottie のバージョン。
  • 自動再生、ループ、セグメント、マーカー、速度、方向、状態、インタラクションの要件。
  • テキストの扱い方針：グリフのアウトライン化、ランタイムテキスト、ローカライズ、フォント、フォールバック、ライセンス。
  • 外部／埋め込み画像と CORS／オフラインに関する制約。
  • 使用するマスク、トラックマット、描画モード、エフェクト、エクスプレッション、タイムリマップ、ネストされたコンポジション。
  • レスポンシブなフィット／クロップ動作と、動きを抑えた表示／静止画のフォールバック。
  • 決定論的な動画キャプチャの要件。
  • ファイルサイズ、起動時間、メモリ、配信に関する上限。
  • 権利者、元アートの権利、フォント、画像、ロゴ、サードパーティの表記。

リスクのある機能ごとに最小限のフィクスチャを 1 つ作成し、多数のアニメーションを制作する前に、すべてのターゲットでテストしてください。

交換モデルを理解する

文書化されている事実： Lottie ドキュメントは、ルートに Animation オブジェクトを持つ JSON です。Animation データには、寸法、フレームレート、イン点とアウト点、レイヤー、アセット、アニメーション化されたプロパティが含まれます。キーフレームはフレーム順に並び、ホールドまたはキュービックベジェイージングを使用できます。レイヤーは親子関係を設定でき、子のトランスフォームは親のトランスフォームと合成されます。

そのため、Lottie は時間を指定できるベクターモーションに適していますが、ドキュメントが有効であるからといって、すべてのプレーヤーで同一にレンダリングされるとは限りません。仕様が対象とするエコシステムは拡大中であり、プレーヤーによっては追加、欠落、または異なる動作が実装されています。

互換性台帳を用意してください。

feature | source usage | web-svg | web-canvas | ios | android | dotlottie-player | fallback

固定したバージョンでテストした結果を記入してください。本番承認に汎用的なサポート表を流用しないでください。

オーサリングとエクスポートの契約

Bodymovin/lottie-web は、一般的に After Effects の対応コンポジションを JSON にエクスポートします。エクスポート前に、次の点を確認してください。

  • コンポジションの正確な寸法、fps、ワークエリア、最終的な長さを設定します。
  • 未使用のレイヤー、エフェクト、エクスプレッション、キーフレーム、大きすぎる非表示アートを削除します。
  • レイヤーとマーカーに、安定した意味のある名前を付けます。
  • デザインの承認を得た場合に限り、未対応のエフェクトを変換または簡略化します。
  • 参照用ムービーと代表的なソースフレームを保持します。
  • フォントを収集またはアウトライン化し、承認済みの文言を確定します。
  • ラスターアセットを外部参照、埋め込み、パッケージ化のいずれにするか決定します。
  • 編集可能なソースとエクスポート設定を保持します。

lottie-web で文書化されている事実： Bodymovin は、一般的なシェイプ、プリコンポジション、ソリッド、画像、ヌル、テキスト、マスク、タイムリマップに対応していますが、制限があります。コンポジションのオプションには、テキストをグリフシェイプに変換する、参照されている場合に非表示レイヤー／ガイドレイヤーを含める、追加のコンポジションをエクスポートする、元のラスターアセット名を保持するといったものがあります。非表示レイヤーやガイドレイヤーを含めると、出力が増加します。

エクスポーターのレポートやプレビューを使用し、対象プレーヤーでテストしてください。エクスポーターのプレビューに問題がなくても、クロスプラットフォームでの検証にはなりません。

タイポグラフィ：グリフかランタイムテキストか

グリフのアウトライン

文言が固定されており、見た目の正確さが重要な場合は、グリフへの変換を選択してください。レンダリング時の依存関係からフォントの読み込みを取り除けますが、ベクターデータが増加し、通常のテキストとしての意味や編集性が失われます。また、文言やローカライズを変更するたびに再エクスポートが必要です。

ランタイムテキストとフォント

ローカライズや動的な文言が必要で、対象プレーヤーが必要なテキスト動作に対応している場合は、ランタイムテキストを選択してください。アニメーションの初期化前に、ライセンスを取得したフォントをパッケージ化するか、事前に読み込んでください。すべてのプレーヤーで、シェーピング、改行、フォールバック、グリフのカバレッジ、右から左に記述するスクリプト、結合文字、ロケールによる文字列の拡張をテストしてください。

ラテン文字のテスト用データで、アラビア文字、デーヴァナーガリー文字、CJK、その他のスクリプトも検証できるとは考えないでください。アクセシビリティを確保する必要がある文言や、動的に翻訳される文言をアウトライン化する場合は、ホスト側に同等の意味を持つテキストレイヤーを用意してください。

テキストの決定記録：

  • 正確なソース文字列とロケール
  • フォントファミリー／ファイル／ウェイト／スタイル／ライセンス／チェックサム
  • グリフモードかテキストモードか
  • 想定する折り返し領域と改行
  • 使用する場合のランタイム置換 API
  • アクセシビリティ用テキストとローカライズの担当者
  • フォントまたはシェーピングに失敗した場合のフォールバック

画像、マスク、マット、エフェクト、エクスプレッション

シェイプ以外の機能をすべて洗い出してください。個々の機能だけでなく、組み合わせもテストしてください。

画像
  • ローカルの画像ファイルを固定し、アスペクト比の動作を保持します。
  • 最終パッケージでは、変更される可能性のあるリモート URL を避けます。
  • 画像の欠落／エラー状態とオフラインでの使用をテストします。
  • 複数のアニメーションをパッケージ化する場合は、共有アセットを重複排除します。
  • 画像の権利と変換内容を記録します。
マスクとマット

マスクとマットの動作は、レンダラー／プレーヤーによって異なる場合があります。エッジの品質、反転／減算の動作、ネスト、アルファ、クロップ、パフォーマンスをテストしてください。対象環境で失敗する場合は、構成を簡略化する、対応しているベクター形状に変換する、その要素を事前にレンダリングする、または配信形式を変更してください。

エフェクトとブレンドモード

AE のエフェクトやブレンドモードに、移植可能な同等機能があると想定しないでください。対象マトリックスで動作が確認されたものだけを使用してください。明るい背景、暗い背景、透明な背景、実際のホスト背景で、結果を参照フレームと比較してください。

エクスプレッション

エクスプレッションは、移植性と決定性に関するリスクを高めます。lottie-web には、エクスプレッションを無効にできるレンダラー設定があります。エクスプレッションが必要な場合は、次の点に留意してください。

  • プレーヤーの正確な対応状況をテストする；
  • ネットワーク、実時間、デバイス、またはシードのない乱数への依存を避ける；
  • 実行時のコストをプロファイリングする；
  • キーフレームを焼き込む代替手段を文書化する；
  • 任意のフレームへのシークを検証する。

JSON と dotLottie を意図的に選択する

Lottie の生の JSON では、画像やフォントのアセットを別途参照する場合と、一部のリソースを埋め込む場合があります。シンプルで広く認識されていますが、複数ファイルの管理上の問題が生じることがあります。

文書に記載された事実： dotLottie は、1 つ以上の Lottie JSON アニメーションとリソースを、.lottie 拡張子の Deflate 圧縮 ZIP アーカイブにまとめます。dotLottie v2 では、manifest.json と a/ アニメーションディレクトリが必須です。i/、f/、t/、s/ にはそれぞれ、画像、フォント、テーマ、ステートマシンを格納できます。マニフェストには、バージョンと 1 つ以上のアニメーションエントリが必要です。

バージョンの選択は重要です。dotLottie の公式ドキュメントでは、v2 は新規プロジェクトに推奨、v1 は広くサポートされているとされています。テーマやステートマシンなどの v2 機能を選ぶ前に、対象プレーヤーの対応状況を確認してください。

パッケージのルール：

  • マニフェストの ID が実際のファイルと一致することを検証する；
  • ファイル名の移植性を確保し、大文字と小文字を統一する；
  • パスがアーカイブの外に出ないようにする；
  • 必要なアセットのみを含める；
  • 共有する画像やフォントの重複をなくす；
  • 初期アニメーション／状態と、任意のテーマを文書化する；
  • アーカイブの解析、アセットの欠落、未対応の任意機能をテストする；
  • デバッグと移行に備えて、元の JSON／ソースパッケージを保持する。

生成された JSON やアーカイブを手作業で編集する場合は、変更内容を記録し、検証と参照比較を再実行してください。

再生、マーカー、セグメント

lottie-web のドキュメントに記載された事実： アニメーションのインスタンスは、play、pause、stop、速度、方向、goToAndStop、goToAndPlay、playSegments、setSubframe、getDuration、destroy などの操作に対応しています。isFrame 引数で、フレーム単位のシークを選択できます。setSubframe(false) はソースコンポジションの fps に従います。デフォルトのサブフレームモードでは、中間値を使って更新されます。

idle、focus、success、reset のような、安定した意味のある編集／状態名としてマーカーを使用してください。各プレーヤーで、正確な名前、開始フレーム、継続時間、境界の扱い、フォールバックの動作を検証してください。dotLottie v2 のステートマシンセグメントの仕様では、マーカーがない場合、アニメーション全体の範囲にフォールバックするとされています。これを安全なデフォルトではなく、検証上の不備として扱ってください。

次の点をテストしてください。

  • すべてのセグメントの最初と最後のフレーム；
  • 繰り返しトリガーと中断；
  • 対応している場合は逆再生と速度変更；
  • すべての有効な状態からの遷移；
  • 無効なマーカー／欠落したマーカーの動作；
  • 重複フレームによる引っかかりのないループ境界；
  • destroy() または対象環境の同等機能による終了処理。

リピーターを含む同じ animationData オブジェクトを lottie-web に複数回読み込む場合、内部での変更がインスタンスに影響する可能性があるため、読み込みごとにディープクローンするよう公式 README で推奨されています。

決定論的な動画キャプチャ

フレームレンダリングされた動画では、自動再生を無効にし、データ、DOM、フォント、画像の準備が整った後に明示的にシークしてください。

lottie-web のキャプチャ構成例：

const animation = lottie.loadAnimation({
  container,
  renderer: "svg",
  loop: false,
  autoplay: false,
  animationData,
});

await readyForCapture(animation, fonts, assets);
animation.setSubframe(false);

export function renderFrame(frame) {
  animation.goToAndStop(frame, true);
}

準備完了を確認するヘルパーはホスト固有です。関連するデータ／DOM／画像の準備完了イベントとフォントの Promise を監視して確認し、固定の待機時間に頼らないでください。

キャプチャ要件：

  • 想定されるソースのフレーム数とフレームレートを記録する；
  • キャプチャ前にフレーム 0 へ明示的にシークする；
  • アニメーションデータとローカルアセットを固定する；
  • 自動再生、実時間のコールバック、シードなしの式、インタラクション状態を使わない；
  • 分離、逆方向、順不同のシークテストを行う；
  • レンダラーとプレーヤーのバージョンを固定する；
  • フレームを繰り返し比較する；
  • ホストのタイムラインに基づいて、オーディオを個別に同期する。

サブフレームの動作は仕様に基づいて決定してください。ソースフレームのキャプチャでは、一般に setSubframe(false) を使用します。ホストの出力 fps が異なり、中間レンダリングを行う場合は、タイミングが保たれると決めつけず、選択した補間方法とフレームマッピングを明示的にテストしてください。

レスポンシブなサイズ調整とバリアント

lottie-web のレンダラー設定では、SVG と Canvas の preserveAspectRatio の動作を指定できます。各キャンバスで meet、slice、または個別に作成したコンポジションのどれを使うか決めてください。

  • meet はアートボード全体を表示しますが、レターボックスが生じる場合があります。
  • slice はボックスを埋めますが、重要なコンテンツが切り取られる場合があります。
  • コンテナーのサイズだけを変更しても、文字、ジェスチャー、セーフエリア、情報密度が再設計されるわけではありません。

アスペクト比が大きく異なり、クロップのルールでメッセージを維持できない場合は、別のレイアウトまたはソースコンポジションを作成してください。最終的な寸法で、線の太さ、小さな文字、マスク、フィルターの境界、ラスタアセットをテストしてください。

最適化

視覚的な正確さと対象環境との互換性を確立してから最適化してください。

  • 未使用のレイヤーとキーフレームを削除する；
  • シルエットとイージングを維持しながら、パスのポイント数を減らす；
  • より小さな構成で実現できる場合は、大きなマスク付きシェイプを避ける；
  • ネストの複雑さと式の処理量を減らす；
  • 実際のコピー／ロケールの組み合わせに基づいて、グリフとフォントのどちらを使うか選ぶ；
  • 共有 dotLottie アセットを一元管理する；
  • アーカイブに関する要件を損なわずに、配信時の転送データを圧縮する；
  • いずれかを常に最速と決めつけず、SVG、Canvas、その他の対象レンダラーの性能を測定する。

パッケージサイズ、解析／読み込み時間、最初のフレームの描画時間、安定再生時の性能、メモリ使用量、終了処理を測定してください。対象となるローエンドデバイスと、製品で必要な場合は複数のインスタンスを同時に実行する状況でテストしてください。

アクセシビリティと安全性

インタラクティブな画面では：

  • ホスト側のコントロール／コンテナーで意味上の目的を公開する；
  • アニメーションの DOM に依存せず、ボタンや状態変更を操作できるようにする；
  • アクセシブルな名前／説明または隣接するテキストを提供する；
  • (prefers-reduced-motion: reduce) を尊重し、自動再生を無効にする、動きを減らす、穏やかな区間を選ぶ、または静止画のポスターを表示する；
  • 必要に応じて、ユーザーが一時停止／停止できるコントロールを提供する；
  • 重要な状態を動きや色だけで伝えない。

lottie-web はタイトルと説明の SVG レンダラー設定に対応していますが、ホスト側のアクセシブルなセマンティクスや、Canvas／その他のプレーヤー向けのフォールバックの代わりにはなりません。

事前に録画した動画を書き出す場合、必要に応じてモーションを抑えたバリアントをレンダリングしてください。CSS では、すでに動画にエンコードされたピクセルを変更できません。

文書化された事実： WCAG 2.2 SC 2.3.1 では、しきい値未満の場合を除き、1 秒あたり 3 回を超える点滅が制限されています。ループ再生中に、想定される最大表示サイズでループをテストしてください。SC 2.3.3 では、本質的でないインタラクションによって発生する動きを、本質的な場合を除いて無効にできる必要があると定めています。

権利と来歴

lottie-web は MIT ライセンスです。このライセンスによって、元のアートワーク、After Effects プロジェクト、フォント、ロゴ、画像、プラグイン、キャラクター、ダウンロードしたアニメーションファイルの権利がクリアされるわけではありません。技術的に編集できることや、公開されていることは、商用利用の権利を示すものではありません。

以下を記録してください。

  • アニメーション／ソースの所有者とライセンス
  • エクスポーターとプレーヤーのバージョン／ライセンス
  • フォントと画像のライセンス
  • アセットのチェックサム
  • 変更内容と最適化手順
  • 参照レンダーと承認
  • 配布先と制限
  • 該当する場合は、生成メディアの来歴

必要な通知を保持し、マーケットプレイス、テンプレート、ブランド、肖像、二次的著作物に関する権利が不明確な場合はエスカレーションしてください。

検証と QA

以下の段階ごとに検証してください。

  1. ソース： 承認済みの参照、寸法、fps、作業範囲、正確なコピー、アセット一覧。
  2. 構造： JSON／スキーマ、または dotLottie のマニフェスト／アーカイブの完全性、パス、ID、アセット、バージョン。
  3. 機能の同等性： ソースの機能一覧と、各対象プレーヤー／レンダラーとの照合。
  4. フレームの同等性： 代表的な最初／中間／最後のフレーム、マスク、テキスト、エフェクト、セグメント境界のフレームを比較。
  5. 動作： 自動再生、ループ、マーカー、セグメント、状態遷移、無効な状態、破棄／再読み込み。
  6. タイポグラフィ： フォントの読み込み、グリフの網羅性、シェーピング、改行、ローカライズ、アクセシビリティ用テキスト。
  7. パフォーマンス： 読み込み、再生、メモリ、同時インスタンス数、ティアダウン。
  8. アクセシビリティ： セマンティクス、動きを抑える設定、点滅、コントロール、静的／構造化された代替手段。
  9. キャプチャ： フレーム数、任意のシーク、繰り返しフレーム、アルファ／背景、ホストでの音声同期。

重大な不具合には、アセットの欠落、コピー／フォントの誤り、意味が変わる未対応機能、非決定的なフレームキャプチャ、セグメント／状態のフォールバックの破損、安全でない点滅、必要な場合の動きを抑える処理の欠如、権利の未確認が含まれます。

納品時の引き継ぎ

以下を提供してください。

  • 編集可能なソースと承認済みの参照レンダー
  • エクスポートした JSON とアセット、および／または .lottie パッケージ
  • テスト済みバージョンを記載した対象互換性マトリックス
  • 正確なプレーヤーの初期化方法とライフサイクルに関する注意事項
  • マーカー／セグメント／状態／テーマのドキュメント
  • フォント／画像パッケージとライセンス
  • 動きを抑える設定／静的なフォールバック
  • 検証とパフォーマンスのレポート
  • 該当する場合は、決定論的なキャプチャに関する注意事項
  • 来歴台帳、通知、既知の制限

例1：ローカライズされたオンボーディングシーケンス

これは完全な例であり、必須の定型ではありません。

目的： Web、iOS、Android 向けに、6つのロケールで3状態のオンボーディングアニメーション（idle、scan、success）を提供します。

制約： 動的にローカライズするラベル、音声なし、320x320論理アートボード、ホストのボタンでインタラクションのセマンティクスを提供、モーション低減モード、小さなラスター素材を1つ、オフラインでの使用。

ワークフロー：

  1. 最終アニメーションを作成する前に、固定した対象プレーヤーでシェイプ、マスク、テキスト、ラスターのフィクスチャをテストします。
  2. ローカライズされたラベルは実行時のテキストとして保持し、ライセンス済みフォントをパッケージに含めて、プレーヤーの初期化前にすべてのロケールでシェーピングとグリフのカバー範囲をテストします。
  3. セマンティックマーカーを作成し、すべての対象でセグメントの境界が正確であることを確認します。
  4. まず幅広い互換性を考慮して JSON／アセットをパッケージ化し、選択したバージョン／機能に対応していることを確認できた対象にのみ、dotLottie パッケージを追加します。
  5. 状態とアクセシビリティはホスト側で制御し、Lottie は視覚的なフィードバックのみを描画します。
  6. エクスポート後に、承認済みの安定した idle-poster および success-poster マーカーフレームを記録します。モーション低減モードでは、該当フレームに直接シークし、スキャンの移動を短い不透明度の変化に置き換えます。
  7. オフライン読み込み、誤ったロケール、フォントの欠落、マーカーの誤記、成功とリセットの繰り返し、破棄と再読み込みをテストします。

期待される結果： ローカライズされたテキストが正確で、視覚状態が同等であり、アニメーションのみで示されるアクセシビリティに配慮されないステータスがなく、リモート依存がありません。

起こりやすい失敗： フォントの初期化が遅すぎる、あるスクリプトでシェーピングが正しく行われない、マーカーの境界が一致しない、モバイルプレーヤーがマスクを処理できない、オフライン時にラスター素材が見つからない、繰り返し読み込むと変更済みのデータが共有される。

バリエーション： プレーヤー間で実行時テキストを使った合格基準を満たせない場合は、セマンティックラベルのテキストをホスト UI に残したまま、ロケール別のグリフアニメーションをエクスポートします。

例2：レンダリング済み動画内の Lottie レイヤー

これは完全な例であり、必須の定型ではありません。

目的： 承認済みの8秒間のベクタールートアニメーションを、30 fps の製品動画に決定論的なオーバーレイとして使用します。

制約： 透明な背景、ナレーションとの正確なフレーム同期、固定したヘッドレスブラウザーでの SVG レンダラー、インタラクションなし、ナレーションと音楽は別トラック、最終出力は1920x1080および1080x1920。

ワークフロー：

  1. JSON、画像、フォント戦略、プレーヤーのバージョン、承認済みのリファレンスを確定します。
  2. 自動再生とループを無効にし、データ、DOM、画像、フォントの準備が整うまで待ちます。
  3. ソースフレーム／サブフレームの動作を明示的に設定し、ホストのフレームをアニメーションのフレームに対応付けます。
  4. goToAndStop(..., true) で要求された各フレームにシークし、ホストコンポジターを通じてアルファをキャプチャします。
  5. フレーム0、1、各マーカー境界、マスク／エフェクトのストレスフレーム、最終フレームを、逆順も含めて2回レンダリングします。
  6. slice によってルートのラベルが切り取られる場合は、縦向けのレイアウトを別途作成します。
  7. 音声はホストのタイムラインで多重化します。Lottie が音声を扱えることは想定しません。
  8. インスタンスを破棄し、ワーカージョブをまたいで DOM／リスナー／リソースが蓄積されないことを確認します。

期待される結果： 固定したブラウザー環境内でフレームが繰り返し同一になり、アルファが正しく、ナレーションのキューが正確で、横向き／縦向きでメッセージが同等であること。

起こりやすい失敗： 固定時間待機では画像の準備が間に合わない、ソースと出力の fps の対応が1フレームずれる、キャプチャ前に自動再生で進んでしまう、リモートフォントによって折り返しが変わる、縦向きの切り抜きでラベルが切れる、最終ループフレームが最初のフレームと重複する。

バリエーション： 対象のレンダラーで必要なマットを再現できない場合は、承認済みの Lottie レイヤーをロスレスのアルファシーケンスに事前レンダリングし、インタラクティブアセットと動画用派生物では提供経路が異なることを明記します。

参考資料

2026-07-12 に確認した公式および権威ある参考資料：

コメント

Markdown 対応