【AEでSVGアニメーション！ 001】メリット説明〜インストール
YOUR GOOD CREATOR
AND SOULMATE
BLOG
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）
SVG対応ブラウザの状況です。
2017年、ほとんどのブラウザが対応できており、シェアも高いのも魅力的。
BodymovinというAEのAdd-onを使う
今回紹介するSVGアニメーションの制作方法は、 BodymovinというAfter Effects Add-onを使う方法です。 jsをゴリゴリ書けなくても、After Effectsで作成したアニメーションを、jsonファイルでパパッとSVGアニメーションに変換してくれます。
今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。
GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、
HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。
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をダウンロード・解凍します。
続いて、Bodymovinをgithubからダウンロード
こちらのBodymovin githubレポリトジページからBodymovinをダウンロードします。
右側の「Clone or download」をクリックしてダウンロードしましょう。
bodymovin.zxpをZXP Installerにドロップ
先にZXP Installer.appを起動します。
Bodymovin githubレポリトジページからダウンロードしたBodymovinのフォルダで
build > extension
と開いていってください。
extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。
Macのユーザ情報を入力してインストールを許可したら終了
ドロップすると「Updating…」という表示に変わります。
その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。
ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。
インストールが完了するとこんな画面がでます
「The extension was successfully installed!」が表示されたら、インストール完了です。
After Effectsで「拡張機能」を確認
アフターエフェクトのメニューから ウィンドウ ＞ 拡張機能 を開いたときに「Bodymovin」が表示されていればインストール完了！