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

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で1番プログラムできないおじさんの町田(@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にしたら(カラー4色、ループ設定) 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!

関東ITソフトウェア健康保険組合に加入して旅に行ったら、12,000円得した話

はじめまして。カヤック技術部の杉山です。 主にクライアントワークでサービスを開発しています。

今回は、ITS健康保険で旅行をするとお得らしいということは知っているものの、実際やり方がわからないということで試してみました。 利用回数に制限はありますが、1万円程やすく旅行することができます。

お申し込み手順に書いてありますが、以下のステップで申し込みます。

  1. パンフレットを眺める
  2. 泊まる場所・行く日・帰る日を決める
  3. FAXを送る
  4. 電話を受ける
  5. Webフォームに入力する
  6. お金を振り込む
  7. 旅に出る

パンフレットを眺める

下記の各旅行会社5つよりお選びください。
①ジェイ・シー・ツーリスト
②ジャルパック
③ANAセールス
④ジェイ・ティー・ビー
⑤日本旅行
⑥はとバス旅行

とかいてありますが、今回は国内旅行を例にします。

たとえば関西の国内ツアーのページです。

ここにリンクのあるデジタルパンフレットは、Flash が利用できないブラウザでは見ることが出来ないので、スマートフォンでの閲覧は、Puffin など Flash が見られるアプリを利用して確認する必要があります。

泊まる場所・行く日・帰る日を決める

上の例では、ツアーと書かれていますが、パッケージになったツアーではないので、 行き帰りの電車と、泊まるホテルは、自由に選ぶことが出来、どこに行っても大丈夫です。

FAXを送る

実際に申し込みます。 ここから申請書類をまずダウンロードします。

ITSといえども、FAXをつかわなければならないという厳しい制約があるため、 iPad Pro を使い、Appleペンシルで記入するのがIT業界っぽいのではないでしょうか。

FAXはコンビニから50円程度で送ることがで来ます。 自分の行ったコンビニでは、紙のデータしかFAXを送信できなかったため、 一度USBメモリに入ったPDFを印刷してからFAXを送りました。

電話を受ける

次の日に電話がかかってきます。 金額の再計算や、ホテルが一杯だった場合に他のホテルを提案などをしてくれます。 このとき合計金額を言われるので、それだけは忘れずにメモします。

基本旅行代金が2万円を超える場合は、1万円補助。2万円以下の場合は半額補助になります。 自分の場合は1万円補助されました。

さらに、早期申し込みで割引される場合があるようで、 自分が試したところでは、60日程前に申し込んだため、さらに2000円引きになりました。

補助金申請を行う

IT業界らしく、Webページから申請することになります。 「ITS旅行パック(補助申請)」をクリックし、電話で伝えられた金額などを入力します。

お金を振り込む

しばらくすると、振込先の案内が家に届くので、書かれている銀行に振り込みます。 数日後、新幹線のチケットなどが送られてきます。

最後に

案外簡単に申し込みができました。 ITSに加入している方は利用してみてはいかがでしょうか。

関東ITソフトウェア健康保険組合に加入したいと思った人はこちらから! 杉山のブログを読んだと書いてもらえると、筆が進みます。