Lottie アニメーションのプレビュー

機能

• .json をドロップするだけで再生。速度調整（0.25× / 0.5× / 1× / 2×）
• シーク可能なタイムラインでコマ送り確認。「現在 / 総フレーム数」も表示
• 背景はチェッカー / 明るい / 暗いを切り替え —— チェッカーは透過部分の確認用
• コンポジション情報：サイズ・フレームレート・フレーム数・長さ・レイヤー数・名前・bodymovin 版・生成ツール
• 受け渡しチェック：エクスプレッション、画像の埋め込み / 外部参照、高フレームレート、長すぎる長さ、大きすぎるサイズ、古い版での書き出し
• ファイルは送信しません。プレイヤーは実際にファイルをドロップしたときだけ読み込まれます（当サイト最大の依存）
• Lottie でないファイルには、空白ではなく明確な一文を返します

使い方

1. 点線の枠に Lottie JSON をドロップします
2. 再生・スロー・シークしてアニメーション自体を確認します
3. 右側のコンポジション情報と受け渡しチェックを読みます
4. その結論をもとに、書き出し直すか（キーフレーム化・画像の埋め込み・フレームレート低下）を判断します

よくある質問

「エクスプレッションを使っています」と言われるのはなぜですか？

移植で最もつまずきやすい箇所だからです。Lottie のエクスプレッション（After Effects でプロパティに書いたスクリプト。書き出すと `x` フィールドに入ります）はブラウザでは動作します（このプレビューがその証拠です）が、多くのモバイル向けプレイヤーは対応していません —— react-native-lottie の一部の版や一部のミニプログラム部品が該当し、その環境では静止したり誤った位置で止まります。しかも開発者はまずプレイヤーの版を疑います。それらの環境で使うなら、書き出す前に After Effects でキーフレームに変換してください。

エクスプレッションを含むファイルで、なぜ確認を求められるのですか？

Lottie のエクスプレッションはそのまま JavaScript で、プレイヤーはアニメーション値を求めるためにそれをコードとして実行する必要があります —— つまりエクスプレッション入りの `.json` は単なるデータではありません。テキストエディタでも Git でもただのテキストで、プレイヤーが読み込んだときにだけ実行されます。そして「ファイルをプレビューする」は直感的には読み取り専用の操作ですから、この判断はあなたに委ねています。 確認する前に考えたいのはそのファイルの入手元です。自分で書き出したもの、同僚から受け取ったものなら問題ありません。素材サイト・グループチャット・メール添付からダウンロードしたものなら、いったん止めてテキストエディタで `"x":` を検索してみてください。中身が読めるエクスプレッションなのか、意味不明なコードなのかが分かります。 なお、これは受け渡しの前に片付けておきたいものでもあります。エクスプレッション入りの Lottie を渡すことは、実行可能なコードを一緒に渡すことでもあります。

画像の「埋め込み」と「外部参照」は何が違いますか？

Lottie 内のビットマップには2通りの持ち方があります：埋め込み（data URI にして同じ JSON に入れる）と外部参照（JSON には相対パスだけを書き、画像は別ファイル）。埋め込みは自己完結でどこへ持って行っても動きますが重くなります。外部参照は JSON だけをコピーすると画像が欠け、しかもプレイヤーは通常エラーを出しません —— 一部が欠けるだけなので、アニメーション自体の問題と誤解されがちです。どちらを選ぶかは用途次第で、CDN 配信する小さなアイコンは埋め込み、大きな画像は外部参照が向いています。

フレームレートが 60 を超えると無駄なのはなぜですか？

多くのディスプレイ（特にスマートフォン）のリフレッシュレートは 60Hz で、それを超えるフレームは表示されないからです。一方 Lottie はフレームごとのデータをファイルに書き込みます（補間されたキーフレームを1フレームずつ計算するため）。余分なフレームは容量を増やすだけで見た目は変わりません。60fps で十分に滑らかで、多くの UI モーションには 30fps で足ります —— どちらかに落とすとファイルが目に見えて小さくなります。

このプレビューは実際のプロジェクトでの再生と同じですか？

まったく同じです。どちらも同じプレイヤー、Airbnb 公式実装の `lottie-web` を使っているからです。Web プロジェクトもこれを使い、ミニプログラムや React Native は独自の移植版を使います —— 挙動が違い得るのはそちらです。したがってこのページの最も価値ある使い方は、アニメーション自体に問題がないことをここで確認し、移植版は移植先で検証することです。また 0.25× のスロー再生は細部の確認に最も有効で、通常速度では見えないブレやずれ、レイヤーの問題が一目で分かります。