After Effects でつくったモーショングラフィックは、アドオンを利用して簡単に書き出し、ブラウザ表示できます。
（複雑なアニメーションだと重たいので注意）
書き出す方法
まずはごにょごにょしてアニメーションをつくります。
Bodymovin Add-on で書き出す
Adobeのサイトからアドオンをインストールします。
Adobe Add-ons
※インストール後、 「環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる 必要あり
そして、「ウィンドウ > 拡張機能 > Bodymovin」をクリックするとこんなウィンドウが。
書き出したいコンポジション？を Select （一番左列クリック） して、Render ボタンクリックするだけで data.json が吐き出されます。
※吐き出し先は、「../Destination Folder」列の緑文字クリックで変更
実際に表示してみたDEMOはこちら。
- DEMO1 circle_animation
- DEMO2 logo_animation
bodymovin.js は Github にアップされているものを利用。
index.html では body 内に以下記述。
<div id="bodymovin"></div> <script src="bodymovin.js"></script> <script> var animData = { wrapper: document.getElementById('bodymovin'), animType: 'svg', loop: true, prerender: true, autoplay: true, path: 'data.json' }; var anim = bodymovin.loadAnimation(animData); </script>
これだけ！
さらに簡単な書き出し形式も
なんと、 環境用意しなくても動作確認できるDEMO用ファイル も書き出せます。
Bodymovin ウィンドウ内、 Setting 列の歯車アイコンをクリックするとこんな画面に。
一番下の「DEMO」をクリックしてから Render ボタンクリックすると、「 demo.html 」が吐き出されます。
JSも内包されており、 ブラウザで開くだけで表示できます 。
Logo Motion Demo
↑実際のファイルの様子です。
注意点
aiデータはそのまま使えない
aiデータを単に配置すると、ベクターではなくただの画像データとして出力されてしまいます。「コンポジション-レイヤーを維持」で配置していてもダメ。
地道ですが、こちらのサイトを参考にして試したところうまくいきました。
illustratorのパスをAfter Effectsで動かす方法
SVGとして吐き出すには、AfterEffects内でパスとしてつくる必要があるのです。
サポートされていない機能がある
画像のシーケンス
ビデオ、オーディオ
レイヤーの時間伸縮
3Dレイヤー
やりたかったことができない、という可能性があるので注意です。
たまに位置がずれる
このように、After Effects と吐き出したコードとでずれる現象があり、取り急ぎ After Effects 側にて位置調整して対応しました。
レイヤー名がそのまま吐き出される
「楕円形」「トリミング」のように吐き出されてしまい格好わるいので、ちゃんと整理が必要です。
（SVG扱うなら今回に限らずですが）
まとめ
CSSやJavaScriptをゴリゴリ書かずとも、このように簡単に表示できます。
ちょっとしたローディングやメインビジュアルの動きをデザイナーが直接調整できると、よりスピーディに制作できる かも しれません。（まだ試していない）
参考
- GitHub - bodymovin/bodymovin: after effects to html library
- AfterEffectsで作成したアニメーションをJSONで書き出してみた | デザイナーの独り言 | BLOG | 株式会社ソニックジャム
- Adobe After EffectsとbodymovinでSVGアニメーションの作成を試してみる - Qiita
余談: After Effects をさわり始めた経緯
After Effects をさわりだしたのは、つい最近です。
だいぶ前に ハラ@life-is-bitter さんが投稿されていた記事を読んで興味を持っていたのです。
その後？ Udemyさんの講座を見つけて購入。今回も基本的な操作はここで学びました。
（やろうやろうと思いながら何もせずに半年以上経）
知りたいところだけスピーディに学べていい感じでした。
Udemyさんは「90%OFF」みたいなトチ狂ったセールを時々するので、アンテナ張っておくのがオススメ。
あと、元々動画編集の知識に乏しく、モーショングラフィックも「どうやってつくるんだろう」「どれくらい大変なんだろう」とさっぱりわからない状態。
学んでから上記サイトに載ってるような動きを見ると、どれも基本機能の応用でつくってるんだな〜と、印象が全然違います。その点でも取り組んだ価値がありました。