アート

どっち!?GIF、APNG、WebP、Lottieの比較の違い!(AE/アニメ画像に変換する君)

アート

Web上でアニメーションする方法を検討しました。

厳選!お絵描きや創作におすすめな技法書・動画・ソフトウェア

どっち!?GIF、APNG、WebP、Lottieの比較の違い!

特性/フォーマット
GIF
APNG (Animated PNG)
WebP
Lottie (ベクトルベース/SVG)
提供元
CompuServe
PNG Group
Google
Airbnb
ファイルサイズ
大きい
中程度
中程度
小さい
透過サポート
単色の透過のみ
半透明OK
半透明OK
半透明OK
品質
低〜中
高
高
高
プログラミングからの制御
再生・停止、ループ可能
再生・停止、ループ可能
再生・停止、ループ可能
ボタン操作、ループ、シークバー操作などが可能
メリット
サポートが広い、編集が簡単
品質が高い
品質と圧縮率が良い
高度なアニメーション、小さいファイルサイズ、シークバー操作が可能
デメリット
ファイルサイズが大きい、品質が低い
WebPよりサイズが大きい
編集ツールが限られている
特定のAfter Effectsの機能はサポートされていない
採用実績
いろいろ
動くLINEスタンプなど
いろいろ
いろいろ
ライセンス
制限なし
制限なし
制限なし
MIT License
AE(After Effects)からの書き出し
書き出した動画をPhotoshopでgif化できるよう
PNGの連番と書き出し、「アニメ画像に変換する君」を利用
PNGの連番と書き出し、「アニメ画像に変換する君」を利用
Bodymovinプラグインが必要
制作コスト
低
中
中
高

Lottieができないこと!

  1. 一部のエフェクトとプラグイン: After Effectsの多くのサードパーティプラグインや一部のネイティブエフェクトはLottieでサポートされていません。
  2. 3Dレイヤー: Lottieは基本的に2Dアニメーションに特化しているため、3Dレイヤーと3Dエフェクトはサポートされていません。
  3. 複雑なシェイプレイヤーアニメーション: シェイプレイヤーもサポートされていますが、一部の複雑なパスやプロパティは制限があります。
  4. マスクの一部の種類: After Effectsのすべてのマスクタイプやマスクオプション（例：ぼかし）がサポートされているわけではありません。
  5. タイムリマッピング: 一部の高度なタイムリマッピングオプションは、Lottieで再現するのが難しい場合があります。
  6. エクスプレッション: AEのエクスプレッションは、一部はサポートされていますが、全てがサポートされているわけではありません。
  7. キャラクターアニメーション: After Effects内での複雑なキャラクターアニメーション（例：Duikツールなど）は一般的にLottieではサポートされていません。
  8. 高度なテキストアニメーション: テキストレイヤーは基本的にはサポートされていますが、高度なテキストアニメーションは制限があります。
  9. ブレンドモード: すべてのブレンドモードがサポートされているわけではありません。

評判

スポンサーリンク

GIF、APNG、WebP、Lottieの比較!個人的にどれがおすすめなの?

Lottieは作業の複雑性、できないことがある等の理由に採用をみおくり、

半透明したいのなら、APNGかWebPなのだけど、軽量、シェアの関係からWebPかな。予備案としてAPNGをもつか。

スポンサーリンク

PNGの連番読み込み対応とWebPの書き出しソフトウェア

After Effecrsとアニメ画像に変換する君のあわせ技

この方法がおすすめです。詳細はこちらの記事をみてください。

After EffectsからWebPの書き出し(透過PNG)
After Effectsの覚書です。 AE(After Effects)からPNGの連番をエクスポートする手順 ファイル > 書き出し > レンダーキューに追加 出力モジュール設定 形式：PNGシークエンス チャンネル：RGB
ergamedesign.net

PhotoshopやAdobe Media EncoderはPNG連番をwebpにできる?

コメント

タイトルとURLをコピーしました