みなさんこんにちは!編集部です。 寒くなってきましたが、しっかり保湿していますか? 今回はAdobe AfterEffects(以下Ae)を使用してSVGアニメーションを制作する方法をご紹介したいと思います。 Bodymovinをインストールする まずAeのプラグインBodymovinをAdobeストアからDLします。 DLできない場合はLottieのGITHUBからもDLできます。 動かしたいベクターをAi形式で保存する SVGはベクターデータに動きをプラスしていくのでpngやJpgなどは使えません。 動かしたい画像は事前にベクターデータを用意しておきましょう。 ベクターデータをAdobe Illustrator(以下Ai)で開き、新規HDTVにペーストして保存します。 通常のアートボードでも問題ないと思いますがAe用のAiデータはこっちの方がいいって偉い人が言ってたのでわたしはこの形式