l Webデザイン SVGアニメーションをAfterEffectsで作成する方法
今回はAdobe AfterEffectsを使用してSVGアニメーションを作成する方法を紹介していきたいと思います。
l Bodymovinをインストールする
まずは、After EffectsのプラグインであるBodymovinをインストールします。
Adobeストアからダウンロードできます。
l アニメーションさせるベクターをAIデータにする
pngやjpgファイルなどは使えないので、アニメーションさせたいモノは、事前にベクターデータとして用意しておきます。私はそれぞれパーツを分けてファイルを準備しています。
今回使用したイラストは下記ページの中からダウンロードしています。
l AIデータをシェイプに変更する
AfterEffectsでAIデータを読み込み、コンボジション内にもAIデータを配置します。レイヤー→作成→ベクトルレイヤーからシェイプを作成してきます。
l アニメーションを作る
AfterEffectsを触った事がない人は編集が難しいかもしれませんが、
どんな動きにするかなど予め決めてから作成していきます。
l コードを書き出す
アニメーションが完成したら「Bodymovin」でjsonファイルを書き出します。
「Bodymovin」を開くと以下のウィンドウが立ち上がるので、書き出し先のフォルダを指定して「Render」をクリック後に書き出しが開始されます。
クリック後に下記の画面が表示され、jsonのファイルが書き出されたら成功です。
l Lottieを使ってアニメーションを表示させる
jsonファイルが書き出せたら、実際にLottieのプレビューで確認をしてみましょう。
無事アニメーションが表示されているのを確認する事が出来ました。
l 最後に
AfterEffectsでアニメーションさえ作れれば、SVGアニメーションはデバイス関係なく使用が出来るので、色々試していきたいと思います。