After Effectsを使ってSVGアニメを作る ウェブデザイナーでAfter Effectsを触れる人、または映像制作をしている人でウェブ案件に関わっている人、 そういう人には今回の方法は簡単で、かつ分かりやすく 複雑なSVGアニメーションを作りやすいです。 筆者はウェブデザイナーの出身で、後に映像制作に手を出し今に至るわけですが、 映像の中でもモーショングラフィックスを得意としており、 モーショングラフィックスの作成にはAfter Effectsを使っています。 だから、この方法はドンピシャでした。 ウェブ案件でちょっとしたアニメーションが使われることも 最近ではあたりまえのようになりましたね。 ページローディング時のアニメーションもその一つですが、 これからもっと増えてくるのではないか、と予想します。 今回は数ある動画フォーマット(GIFアニメやmp4、Youtube利用など)のなかで 「なぜSVGアニメーションなのか」、そしてAeを利用したSVGアニメーション制作の下準備までを説明したいと思います。
SVGのメリット
SVGには他の画像ファイルにはないメリットがいくつかあります。 もちろん、それらはSVGアニメにも引き継がれています。- 画像ファイルに比べてファイルサイズが小さい
- 拡大縮小してもジャギーが出ない
- プラットフォーム依存が少ない
画像ファイルに比べてファイルサイズが小さい
SVGはXMLという言語がベース画像フォーマットで、 従来の画像フォーマットJPEGやPNGに比べファイルサイズが小さいです。 ファイルサイズの比較を行っている記事があります。 [blogcard url=”http://blog.asial.co.jp/1109″]拡大縮小してもジャギーが出ない
SVG:Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス) つまり、伸縮できる、ヴェクターの、画像 ということです。 ヴェクターについての説明はこちらのサイトをご参照ください。 [blogcard url=”http://www.atmarkit.co.jp/ait/articles/0908/18/news099_3.html”] ヴェクターの特性として、曲線が滑らかなまま拡大縮小を可逆的に行えます。 そのため、ジャギーがないのが利点です。プラットフォーム依存が少ない
拡大縮小ができることや、それによる画質の劣化などがないことから プラットフォーム依存がないことが利点です。SVGのサポートブラウザ状況(2017)
![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-20-6.37.44-1024x442.png)
BodymovinというAEのAdd-onを使う
今回紹介するSVGアニメーションの制作方法は、 BodymovinというAfter Effects Add-onを使う方法です。 jsをゴリゴリ書けなくても、After Effectsで作成したアニメーションを、jsonファイルでパパッとSVGアニメーションに変換してくれます。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.19.10-1024x968.png)
Bodymovinでできること・できないこと
BodymovinでSVGアニメに変換する際に、できることできないことをまとめました。エフェクトや3D、ビデオ、オーディオは非対応
- 画像ファイルの書き出し
- エフェクト類
- 画像のシーケンス
- ビデオ、オーディオ
- レイヤーの時間伸縮
- 3Dレイヤー
シェイプ、パス、プリコンポ、マスクなどは対応
- プリコンポーズ
- シェイプ(矩形、楕円、星型)、テキスト
- ヌルオブジェクトレイヤー
- マスク
- パスのトリミング
- タイムリマップ
- ブレンドモード(IE、Edgeを除く)
読み込んだイラレのレイヤーは画像ファイルとして書き出される
BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。 なので、パスデータ以外は画像(PNG)に変換されます。 After Effectsでモーショングラフィックスを作成する際、 素材をIllustratorで作成し、レイヤーを分けた状態でAeに読み込み、 アニメーションをつける作業をすることが多々あります。 この読み込んだIllustratorのレイヤは、パスデータではなく、 Illustratorのレイヤのリンクファイルなので、BodymovinでSVG化した際には PNG画像に変換されます。BodymovinをAfter Effects 2017にインストールする手順
After Effects2017での拡張機能(Add-on)インストール方法をご説明します。拡張機能インストールアプリ ZXPインストーラをダウンロードする
まずAdd-onインストールのために、ZXP Installerをダウンロード・解凍します。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-20-6.57.13-1024x531.png)
続いて、Bodymovinをgithubからダウンロード
こちらのBodymovin githubレポリトジページからBodymovinをダウンロードします。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-20-7.03.59-1024x382.png)
bodymovin.zxpをZXP Installerにドロップ
先にZXP Installer.appを起動します。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.15.23.png)
![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.21.22-1024x333.png)
Macのユーザ情報を入力してインストールを許可したら終了
ドロップすると「Updating…」という表示に変わります。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.20.14.png)
![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.20.30.png)
インストールが完了するとこんな画面がでます
「The extension was successfully installed!」が表示されたら、インストール完了です。![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-16-10.20.50.png)
After Effectsで「拡張機能」を確認
アフターエフェクトのメニューから ウィンドウ > 拡張機能 を開いたときに「Bodymovin」が表示されていればインストール完了!![](http://plife.studio/wp-content/uploads/2017/09/スクリーンショット-2017-09-21-14.48.04.png)