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」が表示されていればインストール完了！
iPhone8やXの他、AppleTV 4KやAppleWatchも発表されました。
それらの発売日などをざっくりまとめてみました。
あんまり機械に詳しくない人のために、とっても分かりやすく違いをまとめました。
まさかのセルラーモデルが出るとは。
AppleWatchがついに単体でも使えるようになりました。
今まではiPhoneとセットじゃないとただの高級時計でしかなかったのですが、
単体でも電波を受信するようになり、通話などができます。
AppleTVの4K対応に関しては、その事実よりも、提供ソフトのメリットがかなり大きいです。
本体やアクセサリ自体は、4Kモデルとそうでないモデルで実感できるような大差はないと思います。
このサイトは「.studio」という村の「plife」さん。
「.com」という村や「.net」という村にも同じ「plife」さんがいることもあるのです。鈴木さんが隣町にもいる感じです。
あのサイトは「192.168.xxx.xxx」、このサイトは「192.168.yyy.yyy」なんて覚えていられないので、覚えやすいように「ドメイン」を使うのです。
「あそこの村の鈴木さん（ドメイン）」＝「日本のソーダ村のメロン地区30−2の鈴木さん（IPアドレス）」に変換する、みたいな感じです。
個人的にはかなり面白い方向性だな、と思います。