デザイナーでもできる、 After Effects からのSVGアニメーション書き出し
Updated
2022.10.15
Published
2017.06.11
After Effects でつくったモーショングラフィックは、アドオンを利用して簡単に書き出し、ブラウザで表示できます。
書き出す方法
まずは、モーショングラフィックを用意します。
Bodymovin を使って書き出す
After EffectsのデータをHTMLに書き出せるExtension「Bodymovin」を使います。
公式サイトからインストールします。
インストール後、 「環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる 必要があります。
「ウィンドウ > 拡張機能 > Bodymovin」をクリックするとこんなウィンドウが。
書き出したいコンポジションを Select （一番左列クリック） し、Render ボタンをクリックすると data.json が出力されます。
※出力先は、「../Destination Folder」列の緑文字クリックで変更
実際に表示してみたDEMOはこちら。
DEMO1 circle_animation
DEMO2 logo_animation
bodymovin.js は Github にアップされているものを利用。
index.html では body 内に以下記述。これだけです。
さらに簡単な書き出し形式も
なんと、 環境用意しなくても動作確認できるDEMO用ファイル も書き出せます。
Bodymovin ウィンドウ内、 Setting 列の歯車アイコンをクリックするとこんな画面に。
一番下の「DEMO」をクリックしてから Render ボタンクリックすると、「 demo.html 」が吐き出されます。JSが内包されており、 ブラウザで開くだけで表示できます 。
注意点
aiデータの利用にはコツがいる
「コンポジション-レイヤーを維持」で読み込みます。
アイコンがaiになってますね。
選択して右クリックすると、「 ベクトルレイヤーからシェイプを作成 」という項目があります。
するとこんな感じで、aiデータレイヤーのすぐ上にパスのレイヤーができました。
サポートされていない機能がある
画像のシーケンス
ビデオ、オーディオ
レイヤーの時間伸縮
3Dレイヤー
たまに位置がずれる
次のように、After Effects と吐き出したコードとでずれる現象があり、取り急ぎ After Effects 側にて位置調整して対応しました。
まとめ
CSSやJavaScriptをゴリゴリ書かずとも、このように簡単に表示できます。
ちょっとしたローディングやメインビジュアルの動きをデザイナーが直接調整できると、よりスピーディに制作できるでしょう。