みなさんこんにちは！編集部です。
寒くなってきましたが、しっかり保湿していますか？
今回はAdobe AfterEffects(以下Ae)を使用してSVGアニメーションを制作する方法をご紹介したいと思います。
目次
Bodymovinをインストールする
まずAeのプラグインBodymovinをAdobeストアからDLします。
DLできない場合はLottieのGITHUBからもDLできます。
動かしたいベクターをAi形式で保存する
SVGはベクターデータに動きをプラスしていくのでpngやJpgなどは使えません。
動かしたい画像は事前にベクターデータを用意しておきましょう。
ベクターデータをAdobe Illustrator(以下Ai)で開き、新規HDTVにペーストして保存します。
通常のアートボードでも問題ないと思いますがAe用のAiデータはこっちの方がいいって偉い人が言ってたのでわたしはこの形式で保存しています。
Ae上でAiデータをシェイプに変更する
次にAeでAiデータを読み込みます。
コンボジション内にAiデータを配置し
レイヤー→作成→ベクトルレイヤーからシェイプを作成
でシェイプデータが作成できます、これで準備は完了です。
アニメーションをつける
AeでSVGを制作する場合は以下の点に注意しなくてはなりません。
- 反映されないエフェクトがある。
- シェイプ・ベクターしか使えない。
- 見えてないマスク部分も全体のサイズにカウントされる
などなど、Ae特有の豪華なエフェクトもSVGの前では無力、諦めてパスのトリミング、マスクなどを駆使してロゴを動かしていきます。
今回はマスクと円シェイプにパスのトリミングを使用しました。
アニメーションの作り方ですが、言葉より体で感じろ派なのでサンプルデータをご用意しましたので参考にしていただければと思います。
下記よりダウンロードできます。
コードを書き出してもらう
ここから完成したアニメーションをjsに書き出します、最初にインストールしたBodymovinを起動します。
こちらのプラグインはインストールが成功していれば拡張機能に表示されます。
ウィンドウが開いたら、書き出したいコンボジションを選択し保存場所を指定してRenderボタンをクリックします。
その後下記の画面が表示され、data.jsonのファイルが書き出されたら成功です。
Lottieでちゃんと動くかテストする
書き出したJsがきちんと動くかLottieでテストします。
※プレビューを使用する際にはLottieへの登録が必要です！
Lottieに先ほど書き出したJsファイルをドラッグします。
SVGアニメーションの条件を満たしていれば正常に動くことが確認できます。
ちゃんと動いてますね！やったぜ！
自分のサイトでうごかしてみる
正常に動くことを確認したら自分のサイト上で表示させる準備をします。
LottieのGitHubから「lottie.min.js」を入手します。
const anim = lottie.loadAnimation({
container: document.getElementById(‘bodymovin-wrapper’),
renderer: ‘svg’,
loop: true,
autoplay: true,
path: ‘data.json’
});
＜div id=”bodymovin-wrapper”＞＜/div＞
これで自分のサイトでも表示させれるようになります。
細かい使い方などはLottieのGitHubにも記載がありますので確認してみてくださいね。
ロゴだけではなくブログなどのいいね！ボタンやハートボタンなど、SVGアニメーションはデバイスを選ばず使用できるので今後も需要が増えるんじゃないかな～と思っております。
Lottie内にもアニメーションのサンプルが多数掲載されていますので是非ご覧になってください。
