LOGzeudon

名古屋で働いているWebデザイナーのブログです

デザイナーでもできる、 After Effects からのSVGアニメーション書き出し

Atomエディタを良い感じに Material Design っぽい見た目にする方法

After Effects でつくったモーショングラフィックは、アドオンを利用して簡単に書き出し、ブラウザ表示できます。
(複雑なアニメーションだと重たいので注意)

書き出す方法

まずはごにょごにょしてアニメーションをつくります。

Bodymovin Add-on で書き出す

Adobeのサイトからアドオンをインストールします。
Adobe Add-ons
※インストール後、 「環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる 必要あり

そして、「ウィンドウ > 拡張機能 > Bodymovin」をクリックするとこんなウィンドウが。

書き出したいコンポジション?を Select (一番左列クリック) して、Render ボタンクリックするだけで data.json が吐き出されます。
※吐き出し先は、「../Destination Folder」列の緑文字クリックで変更

実際に表示してみたDEMOはこちら。

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内でパスとしてつくる必要があるのです。

(追記 6/11 22:36)

ちゃんと方法がありました。

「コンポジション-レイヤーを維持」で読み込んだ状態。(レイヤー名すいません)
アイコンがaiになってますね。

選択して右クリックすると、「 ベクトルレイヤーからシェイプを作成 」という項目があります。

するとこんな感じで、aiデータレイヤーのすぐ上にパスのレイヤーができました。

サポートされていない機能がある

画像のシーケンス
ビデオ、オーディオ
レイヤーの時間伸縮
3Dレイヤー

Adobe After EffectsとbodymovinでSVGアニメーションの作成を試してみる

やりたかったことができない、という可能性があるので注意です。

たまに位置がずれる

このように、After Effects と吐き出したコードとでずれる現象があり、取り急ぎ After Effects 側にて位置調整して対応しました。

レイヤー名がそのまま吐き出される

「楕円形」「トリミング」のように吐き出されてしまい格好わるいので、ちゃんと整理が必要です。
(SVG扱うなら今回に限らずですが)

まとめ

CSSやJavaScriptをゴリゴリ書かずとも、このように簡単に表示できます。
ちょっとしたローディングやメインビジュアルの動きをデザイナーが直接調整できると、よりスピーディに制作できる かも しれません。(まだ試していない)

参考

余談: After Effects をさわり始めた経緯

After Effects をさわりだしたのは、つい最近です。
だいぶ前に ハラ@life-is-bitter さんが投稿されていた記事を読んで興味を持っていたのです。

www.life-is-bitter.com

その後? Udemyさんの講座を見つけて購入。今回も基本的な操作はここで学びました。
(やろうやろうと思いながら何もせずに半年以上経)

www.udemy.com

知りたいところだけスピーディに学べていい感じでした。
Udemyさんは「90%OFF」みたいなトチ狂ったセールを時々するので、アンテナ張っておくのがオススメ。

あと、元々動画編集の知識に乏しく、モーショングラフィックも「どうやってつくるんだろう」「どれくらい大変なんだろう」とさっぱりわからない状態。

www.lottiefiles.com

学んでから上記サイトに載ってるような動きを見ると、どれも基本機能の応用でつくってるんだな〜と、印象が全然違います。その点でも取り組んだ価値がありました。