svg / canvas出力ができるbodymovinの紹介

JavaScript canvas svg 自分のなかのアツいあれな話

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ　bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。

※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは　V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。

bodymovinpromo

bodymovinとは

AEで制作したアニメーションデータをJSON形式で吐き出してくれるエクステンションでもあり、JSONファイルを元に、web上にsvg / canvas形式で出力することができるライブラリでもあります。 また、bodymovinで吐き出されたJSONファイルは、LottieというAirbnbがリリースしたアニメーションライブラリに使用することができます。 Airbnb Lottie

※bodymovinの読み方は「ボディーモビン」なのか「ボディームビン」なのかは不明ですが、 私は「ボディーモビン」と勝手に読んでます。（※多分、正しい読み方は「ボディームビン」です。）

bodymovinの導入

・Option 1

bodymovin をダウンロードします。 AEの拡張ファイルが'/build/extension'の中に、bodymovin.zxpがあります。 このzxpファイルを開くために　ZXP installer をインストールすることで、 bodymovin.zxpをインストールできるようになります。

・Option 2

次にregistry keyを編集し、PlayerDebugModeを起動しろと書いてありますが、 ZXP installer以外の方法でインストールした場合にのみやる必要があるみたいです。 今回は、ZXP installer使用したので、この手順は必要ありません。

詳しいことはここら辺を見ればいいとおもいます。

・Option 3

AEを起動して環境設定→一般設定→スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可にチェックを入れてください。 ついでに初期設定の空間補間法をリニアにするにもチェックを入れましょう。空間補間法がベジェからリニアに変わります(これ大事)。 あとは、キャッシュや自動保存の設定を自分好みに設定してください。

これで準備は終わりです。bodymovinを起動させましょう。 ウィンドウ→拡張機能→bodymovinで起動します。

AEでアニメーションを作ろう

今回は、kayacロゴをつかって簡単なモーションを元に、アニメーションのJSON書き出しと、 どこまでAEの機能に対応しているのか説明します。
と、思いましたが、実際作ったら特殊なことしない、アニメーションができてしまった…

今回作ったのがこちら…

はい。
シェイプのパスをいじって、キーフレームつけただけですね。
作りながらもっと実用的なものの方がいいんじゃないか？とか思いながら作ってました。

映像自体は60fps　解像度500px ✕ 500でpx制作しています。
容量は JSONファイル　74KB とbodymovin(light var)の 138KB　で 212KB　です（しかもsvgなので解像度は関係ない）
もしgifにしたら(カラー４色、ループ設定) 258KB
もしmp4(H.264)にしたら　807KB

コードについて

jsに書くコードは基本的にこれだけで動きます。

var animation = bodymovin.loadAnimation({
  container: document.getElementById(''), //dom要素の選択
  renderer: 'svg',                        //レンダリング設定
  loop: true,                             //ループ設定
  autoplay: true,                         //オート設定
  path: 'data.JSON'                       //JSONのパス
})

再生のスピードなどのeventを使いたい場合は、addEventListenerで紐付けることができます。

var logo_DOM = document.getElementById('svg');
var animData = {
    container: logo_DOM,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData
};
var kayac_logo = bodymovin.loadAnimation(animData);

//クリックしたらdom要素ごと破壊します
logo_DOM.addEventListener('click', function(){
    kayac_logo.destroy()
    console.log("滅びのバーストストリーム")
});

//ホバーしたらスローにします
logo_DOM.addEventListener('mouseover', function(){
    kayac_logo.setSpeed(0.01)
    console.log("ザ・ワールド（時は止まってない）")
    logo_DOM.addEventListener('mouseout', function(){
        kayac_logo.setSpeed(1)
        console.log("そして時は動き出す")
    });
});

レンダリング形式をsvgにするとcssのfillで色を変更することができます。
JSONファイルを直接いじって大きさなど一応変更できますが、fpsは変更しても意味がないのでAEのコンポ設定を変えて書き出ししましょう。
画像を使用した場合、書き出し時にimagesフォルダができるので、画像置き換えることもできます。
出力された画像データは、勝手にリネームされます。(img_0.pngとかに）

bodymovinが対応してる機能

まず、エフェクトはほとんど対応していません！将来対応予定らしい。

エクスプレッションは生のjsを書けば、対応します。
wiggle(100,100)とか書いてもエラーがでます。
エクプレッション使えないのかよって感じですが、書き出し時にキーフレーム変換をすれば解決します。

その他いろいろ対応機能はgithubのwikiにかいてあります。
https://github.com/bodymovin/bodymovin/wiki

ブラウザで見てみよう

ブラウザで見るには、ローカルサーバーを立てる必要があります。
もしローカルサーバーを立てるのが面倒な場合は、bodymovinの書き出し設定の、
DemoExports an html for local preview
にチェックをいれると、JSONとbodymovin.jsとJSONとhtmlが合体したものが生成されます。

また、lottieには LottieFiles というコミュニティがあり、
他人のAfterEffectsProjectファイルと、JSONファイルをダウンロードすることができます。
しかも、JSONファイルをドラッグ＆ドロップしてプレビューすることもできます！！すばらっ
※画像を使用したアニメーションの場合、LottieFilesは描画できません。

SVG形式で出力した場合 作成したアニメーションによって、ブレンドモードやマスクなどのCSSが必要になるので注意してください。
ブレンドモードを多用すると重くなります。
画像を使うこともできますが、canvas形式のほうが軽い場合があります。

canvas形式で出力した場合 canvas形式で出力した場合、SVGに対応していたものが効かない場合があります。
トラックマットは対応していないので、パスで切り抜きましょう。
既存のcanvasを使うことができます。

html形式で出力した場合 svgとあまり変わりありませんが、3dレイヤーを使用することができます。

対応表はここに書いてあります。
https://github.com/bodymovin/bodymovin/wiki/Features

bodymovinと相性のいいと思うAEプラグインとフリースクリプト

NEWTON
物理シミュレーションを実現する
2D物理エンジンプラグイン
物理演算結果を1フレームごとシェイプレイヤーにキーをうってるだけなので、bodymovinでJSONを書き出せるはず。

LayerGenerators
プラグインをもっていないので、未確認ですが、チュートリアルを見たところ、
平面レイヤーにパスをつけてるだけだったので使えると思います。

Pastiche
プラグインをもっていないので、未確認ですが,ソースレイヤーに指定したレイヤーをその他のレイヤーで埋めてコラージュして、アニメーションさせることができます

Duik
IKやアニメーションを簡単につけることができるフリースクリプト
これがあれば、2Dキャラクターアニメーションは簡単につくることができます。
IKを設定すると動きの制御は全てエクスプレッションなので、書き出す時にキーフレームに変換する必要があります。
Duikを使えば簡単にキャラの髪の毛を揺らしたりできるのですが、
bodymovinがパペットピンツール未対応なので、メッシュでキャラの髪の毛を動かすとかはまだ先の話。

その他After Effectsをサポートしているライブラリ

Marcus Eckert
Squall
Marcus Eckertさん制作のライブラリ、iOS Android向け

Keyframes
facebook制作のライブラリ、こちらもiOS Android向け

まとめ

bodymovinはAirbnbのライブラリで使われてるので、信用できるライブラリだと思います。
実際に案件での使用ができていませんが、この先、使用する可能性は大いにあると個人的に思っています。

bodymovinの詳しい例が知りたい場合
http://codepen.io/collection/nVYWZR/
で見ることができます。

AnimateCCとの住み分けは議論の余地があるかと思いますが個人的には
画像を扱ったり、インタラクティブなことをするならwebglで書き出せるAnimateCC
ベクター（svg）のみならbodymovinだと思います。
画像をイラレの画像トレースでパス化してAEで動かしたら、どれだけ重くなるのか実験してみたいですね。

今後、bodymovinはAEのエフェクトに対応するらしいので、
bodymovinがwebgl,GLSL書き出しできるまでそう遠くないと思います。

フロント向けなのか、デザイナー向け、なのかわからない記事になってしまいましたが、
昨今、クリエイターのスキルの境界は曖昧になってきており、
プログラム技術力もあって、デザインもできるみたいな、マルチタスククリエイターが多くなっています。
フロントエンジニアもデザイナーも新しいことを始めるのもいいかもしれないですね。
カヤックでは一緒に新しいことにチャレンジしてくれるエンジニアも募集しています！(https://www.kayac.com/recruit/fresh )

関連記事 techblog.kayac.com

それでは、みなさん　arrivederci！