自分用の備忘録です。
PhotoshopがWebPに対応し、WebPを取り扱う環境も整ってきた感じがありますが、アニメーションのついたWebPの出力の仕方が分からず、ネットの海を漂っておりました。
最初はffmpegでやってみたものの、あまり綺麗に書き出せず。
調べるとGoogle公式のツールがありました。公式のページからダウンロードしてインストールすることもできますが、Homebrewの入っている環境なら、Homebrewからもインストールできます。
Webp - Homebrew
brew install webp
まず、After EffectsやAnimateなどから連番のPNGを書き出します。
複数の画像からアニメーションWebPを書き出すためのコマンドは、img2webp
です。*
をつけることで、ファイル名の順番で書き出してくれます。
img2webp -d 33 -loop 1 icon_* -o icon.webp
オプションはGoogleのページに解説があります。
一部抜粋すると
-d
1フレームあたりの秒数(ms) もし30fpsなら、33msです。
-loop
ループの回数。0を指定すると無限ループになります。
-o
アウトプットするファイル名
ちょっとしたアニメーションなら割と簡単に書き出すことができました。
ファイルサイズは大きくなりがちなので、短めのアニメーションにするとか、フレームレートを下げるなどの対策は必要そうです。