BLOGブログ

After Effects でのSVGアニメーション作り方〜書き出し

takefushi / 2021.04.27

Web制作・ホームページ制作

自社のトップページでも使用しているSVGアニメーションの作り方〜書き出しまで紹介します。

準備するもの

  • After EffectsのデータをHTMLに書き出せるExtension「Bodymovin」
  • 画像素材(aiデータ)
  • lottie.min.js

上記の3つが必要となります。

「Bodymovin」はこちらからダウンロードできます。

「Bodymovin」をインストール後、「環境設定→一般設定→スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる必要があります。

「lottie.min.js」はGithubにアップされているものを利用こちらからダウンロードできます。

緑の「Code」ボタンからダウンローします。ダウンロードができたら、zipファイルを解凍しファイルの中を見ます。必要な「lottie.min.js」は、「build」フォルダ→「player」フォルダに移動したところにあります。

準備が完了したところでSVGアニメーションの作り方を紹介します。

SVGアニメーションの作り方

step1:コンポジション設定

新規コンポジションの設定は、こちらの画面が表示されます。

基本的にはデフォルトのままで大丈夫です。

後からでも変更することができます。

step2:aiデータをAEに読み込ませる

aiデータをドラックして読み込ませる作業です。

step3:「 ベクトルレイヤーからシェイプを作成 」を行う

ドラックしたaiデータを次の操作でアウトラインを作ります。

①レイヤーから②作成、③ベクトルレイヤーからシェイプを作成を選択

aiデータが非表示になりますが、そのまま非表示で問題ありません。

step4:アニメーションをつける

aiデータは使用せずにアウトラインを作成した方にアニメーションを付けていきます。

今回は、回転のアニメイションを付けます。

各グループを開き、トランスフォームから様々なアニメーションができます。

①「現在の時間インジケーター」をスタート時点に合わせる

②回転のストップウォッチをクリック

③ポイントが付いたこと確認

※ 他のグループもすべて同じようにポイントを付けます

④「現在の時間インジケーター」を最後に合わせる

⑤グループ1からグループ4は時計回りのアニメーション、回転の「0×0.0°」を「1×0.0°」に変えることで時計回り

⑥グループ5からグループ6は反時計回りのアニメーション、回転の「0×0.0°」を「-1×0.0°」に変えることで反時計回り

⑦スペースキーを押すことで、スタート・ストップ

アニメーションづくりはここで完了です。

書き出し方法

ここからは書き出し方法です。

前もって準備していた「Bodymovin」を使います。ダウンロードがまだの方は初めの準備するものからダウンロードできます。

①ウィンドウから②エクステンション、③Bodymovinを選択

④Selectedの下にあるマルをクリックして、緑色に変わることを確認

⑤クリックして、保存先を選択

⑥Renderボタンをクリック

こちらの方法で、「data.json」ができたと思います。

  • data.json
  • lottie.min.js

を揃うことができたら、実際にサイト上に表示させる準備をしましょう。

まず、lottie.min.jsを呼び出します。

	<script src="lottie.min.js"></script>

次に、htmlを書きます。

	<div id="lottie"></div>

これができたらアニメーションが動いてくれます。

まとめ

初めは、作ることや書き出しがうまく行かず苦労しましたが、一度できると簡単にできました。

SVGで書き出すこともできているので、容量も軽くWEBサイトに適したアニメーションだと思います。

ぜひ、試してみてください。

/