SVGからLottieアニメーションを作る
SVGのアイコン、ロゴ、イラストをLibreで開き、動きを付けてLottieアニメーションとして保存できます。編集も書き出しも無料です。
SVGに動きを付ける編集も書き出しも無料。アカウント登録は不要です。
エディターとドキュメントは英語です。
SVGからアニメーションへ
SVGを読み込む
StudioでImportを選ぶか、開いているアニメーションにSVGをドロップします。SVGコードの貼り付けも可能です。読み込み結果の確認画面が出たら、元の画像と比較してInsertを選びます。
動かすレイヤーを選ぶ
レイヤーを選択します。タイムラインの先頭でPositionの横にあるひし形をクリックすると、最初のキーフレームが作成されます。
動きを付ける
再生ヘッドを先に進め、レイヤーを次の位置までドラッグします。スペースキーで再生できます。回転、拡大縮小、不透明度も同じ方法でアニメーションにできます。
Lottieをダウンロードする
Exportを選び、Lottieのプレビューを確認してLottie JSONかdotLottieをダウンロードします。Document actions → Download sourceで、編集用のLibreソースも保存できます。
読み込む前に
- 静止したSVGは、キーフレームを追加するまで動きません。CSS、SMIL、JavaScriptによる既存のSVGアニメーションはタイムラインに引き継がれません。
- 複雑な画像が元と違って見える場合は、元のアプリで簡略化するか、要素をベクターパスに変換してください。動きを付ける前に読み込み結果を確認しましょう。
まず試してみませんか？ 編集できるSuccessサンプルを開く.