画像付きLottieを作成
Lottie JSON・.lottie・ZIPと参照する画像を追加し、対応を確認して1つの.lottieにまとめます。選んだ1つのアニメーションを素材ごと受け渡せます。画像のサイズや品質は変えず、作成した動きを確認して保存できます。
できること
画像とアニメーションを一つに
Lottie JSONが参照する画像を、アニメーションと一緒に.lottieへ格納します。
素材の対応を確認
参照名と手元の画像を照合できます。画像が足りない場合や同名の候補がある場合は、作成前に対応を確認します。
作成したファイルを再生して保存
生成した.lottieを読み直してプレビューします。画像と動きを確認し、そのファイルをダウンロードできます。
使い方
JSONと画像を追加
Lottie JSONと必要な画像を追加します。フォルダやZIPでまとめて追加することもできます。
画像の対応を確認
参照先に対応する素材を確認します。不足する画像を追加し、候補が複数ある場合は使う画像を選びます。
.lottieを作成
プレビューで画像と動きを確かめ、「.lottieファイルを作成」を押します。複数のアニメーションがある場合は、選んだ一つを作成します。
結果を確認して保存
生成したファイルのプレビューが表示できたら、内容を確認して「ダウンロード」で保存します。
こんなときに便利
制作物を素材ごと受け渡す
アニメーションのJSONと画像を別々に渡す代わりに、一つの.lottieにまとめます。
画像を使う動きを公開する
.lottieに対応したサイトやアプリへ組み込むため、必要な画像を含むファイルを用意します。
画像を含むLottieの渡し方
参照名と手元の画像
JSON内の画像名・パスに対応する素材を確認します。同じ名前の候補が複数ある場合は使うものを選んでください。外部URLから画像を自動取得する機能はありません。
.lottieと画像埋め込みJSONの違い
.lottieはアニメーションと素材を格納するパッケージ形式です。画像を文字列にしてJSON内へ含めたい場合は「Lottie JSONに画像を埋め込む」を使います。
利用先のプレーヤー
利用先が.lottieに対応しているか確認してください。このページでの表示確認は、すべてのプレーヤーで同じ再生を保証するものではありません。
画像の見た目と確認用設定
画像サイズや圧縮品質は変更しません。再生速度・背景・繰り返しはプレビュー用で、保存する動きや素材には反映しません。
よくある質問
必要な画像が足りない場合はどうなりますか？
該当する参照先を表示し、作成を止めます。手元にある画像を追加してください。不足した画像の自動取得や生成は行いません。
同じ名前の画像が複数あります。
参照先ごとに使う画像を選びます。フォルダ内のパスやプレビューを確認して、意図した画像を対応付けてください。
画像だけでLottieを作れますか？
できません。動きが定義されたLottie JSONが必要です。このツールは、そのアニメーションと参照画像をまとめます。
複数のアニメーションを一緒に保存できますか？
このページでは選んだ一つを保存します。「複数のLottieを1ファイルにまとめる」を使うと、複数のアニメーションを個別に保持したまま同梱できます。
テーマや対話状態を含むファイルも作成できますか？
この機能では扱えません。基本の動きをプレビューできても、高度な設定を保持して作成できることを意味しません。基本のLottieを書き出して追加してください。
入力と結果
- 入力
- Lottie JSON・.lottie・ZIPと、参照する手元の画像など。
- 出力
- 選んだ一つのアニメーションと素材を含む.lottie。
- 元のファイル
- 上書きしません。入力や素材の対応を変更した後は再作成します。