Lottie JSONに画像を埋め込む
Lottie JSONと必要な画像を追加し、選んだアニメーションの画像を1つのJSONへ埋め込みます。.lottieやZIPも読み込めます。参照先を解決して作成した動きを確認し、画像を含むJSONとして受け渡せます。
できること
画像をJSONの中へ
外部ファイルへの参照を画像データに置き換え、画像を含むLottie JSONを作成します。
参照先と画像を照合
アニメーションが必要とする素材を確認できます。画像が不足する場合は追加し、同名の候補がある場合は使う素材を選びます。
作成したファイルで確認
埋め込み後のJSONを読み直したプレビューで、画像と動きを確認してから保存できます。
使い方
JSONと必要な画像を追加
Lottie JSONと、参照している画像を追加します。フォルダー内の構成を保って追加すると、参照先との対応を確認しやすくなります。
対象と画像の対応を確認
対象のアニメーションを選び、参照画像の状態を確認します。足りない素材や複数の候補を解決してください。
画像を埋め込んだJSONを作成
全ての参照が解決したら「JSONを作成」を押します。画像を別のものへ差し替える編集や、画像の自動生成は行いません。
結果のプレビューを確認して保存
作成されたJSONの表示を確認し、ダウンロードします。確認用の速度や背景を変えても、保存するJSONは変わりません。
こんなときに便利
画像を含むアニメーションを一つで渡す
別画像の渡し忘れを減らしたいとき、必要な画像をJSON内に含めて共有できます。
画像への外部参照をまとめる
移動先で画像の相対パスが合わなくなるのを避けるため、参照画像を埋め込んだファイルを用意します。
画像を埋め込む仕組みと保存形式
外部参照からデータURIへ
通常は画像のパスやファイル名を参照します。埋め込む場合は、画像を文字列として表したデータをJSONに含めます。
埋め込みは容量削減ではない
Base64では画像データの大きさが約4/3になります。画像を含めたJSONは元のJSONより大きくなるため、保存後の容量も確認してください。
JSON埋め込みと.lottie同梱
この画面では一つのJSONに画像データを含めます。.lottieではJSONと素材を圧縮パッケージにまとめます。利用先が受け入れる形式で使い分けてください。
よくある質問
画像を埋め込むとファイルサイズは増えますか？
はい。元のJSONへ画像データを追加し、Base64で表すため通常は大きくなります。容量を小さくするための画像圧縮機能ではありません。
.lottieにまとめる方法とは何が違いますか？
出力が異なります。この画面は画像を含むJSON、画像付きLottieの作成は素材を同梱した.lottieです。使うアプリやライブラリの対応形式で選んでください。
参照画像が足りない場合はどうなりますか？
不足する素材を追加する必要があります。同名の候補が複数ある場合は使うファイルを選びます。必要な参照を解決するまでJSONは作成できません。
画像URLから自動で取得しますか？
外部の画像URLを自動取得することはありません。必要な素材を手元から追加し、対応する参照先を確認してください。
元のJSONや画像は変更されますか？
元ファイルは上書きせず、新しいJSONを保存します。対象や素材の対応を変更した後は、改めて作成してください。
すべてのLottieをJSONにできますか？
Lottieとして読み込め、必要な素材が解決できるものが対象です。テーマや対話状態など、引き継げない拡張情報を含む入力はこの画面では作成できません。
入力と結果
- 入力
- Lottie JSONと必要な手元の画像。.lottie・ZIPも読み込めます。一般的なJSONを動画へ変える機能ではありません。
- 出力
- 選んだ一つのアニメーション。参照する画像データを埋め込んだJSON。
- 確認
- 生成物のプレビューが利用できてから保存。素材の追加や対応変更後は再作成。