AfterEffects-Bodymovin-Lottie-Vueを使ってみる

最近、Vue.jsを触っている。そんで、UIデザインは外注していて、アニメーションの納品はどうしますか？と聞かれたので、聞きかじった程度の知識で「After EffectsでBodymovinでちょちょいのちょいですよ！」とテキトーに答えてしまって、後に引けない感じになったので実際に触ってみることにした。

After Effects

ご存知の通り、Adobe製品。モーショングラフィックとか作るときに用いるツール。Adobe Premiere Proというのもあるが、こちらは動画編集メインで、今回のような込みいった短めのアニメーションなど制作するのはAfter Effectsが適している。

かくゆう、私も大学生の頃、VJというものに興味があり、本ツール（v5.5くらいかな？）を使い、いろいろモーショングラフィックを作成していたものだ。そして今回一万と二千年ぶりにAfter Effects開いて触ってみる。

せっかくなので、会社のロゴアニメーションを作ってみた。画面構成的にはコンポジションって箱を作ってそんなかでワチャワチャ下のタイムラインで動かす。右パネルにエフェクトがあるのでイケイケにする。

要は、レイヤーごとにタイムラインで各オブジェクトを操作できるので込み入ったアニメーションを作りやすいということだ。

で、できたのがドーン！上記のYouTubeを見ながら簡単にできた。あと上記の画像はアニGIFなんだけど、After Effectsから直でアニメーションGIF書き出せないのね。書き出したかったら、GifGunというAEスクリプトを購入しなければならない。（※追記 Adobe Media Encodeにキューを追加すればAMEでアニメーションGIF形式にレンダリングできる！）

だもんで、まずはMOV（動画）で書き出して、それをPhotoshopで開いてアニメーションGIFに書き出す（めんどくさ）。

Bodymovin

アニGIFに書き出しては旧態依然の体たらくぶりなので、今回はBodymovinを使用してみる。

BodymovinはAfter Effectsのスクリプトで、これをインストールすると作成した動画をJSON形式で保存することができる。いろいろインストール方法はあるみたいだが、私はAdobeストアからインストールすればCreative Cloud Desktop Appが勝手にやってくれた。

んで、インスコが終わったらメニューの ウィンドウ > 拡張機能 > Bodymovin を開くと上記のようなパネルが出てくる。保存先のパスを設定して、Renderボタンを押そう。

たぶん、そのままだとエラーが出るので、環境設定からスクリプトによるファイルへの書き込みとネットワークへのアクセスを許可にチェック入れとこう。

{"v":"5.1.16","fr":29.9700012207031,"ip":0,"op":90.0000036657751,"w":1280,"h":720,"nm":"Logo Animation","ddd":0,"assets":[{"id":"image_0","w":1280,"h":720,"u":"","p":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQCAYAAADPfd1WAAAgAEl...

そうすると、こういったJSONファイルができるので、各クライアントに実装するエンジニアさんに渡そう！

Lottie Web

JSONファイル自体はただの文字列なので、これをアニメーションとして、各クライアント（私の場合はWebブラウザ）上で動かしたい。そうするためにはLottieというライブラリを使用してJSONをパースする必要がある。

ちょっとややこしかったのだけど、ちょっと前まではこのLottieのライブラリ名もbodymovin.jsと言ってたらしくて、AEスクリプトなのか、JSライブラリなのか、bodymovinがごっちゃになってた。

私の場合はVueアプリで、このLottieを使いたいので、vue-lottieという便利なラッパーがあるので使用する。

まぁー、ドキュメント通りやればできた。なんか、アニメーションのタイミングがバラバラだけど（たぶんAEの作り方が悪いのだと思う）、力尽きた。一応、再生できてるので良い。（再生が少しまごついているのはアニGIFに書き出したため）

今回はロゴアニメーションで、まぁよくわからない使い道だけど、LottieFilesというサイトには実用的というか、いわゆるマイクロインタラクションに使えそうなアイコンアニメーションがいっぱいある。しかもJSONファイルで落とせるのですく使える。またアニGIFと違い、Lottieは再生と停止がコントロールできるので、用法用量を守って正しく使えばアプリのルック・アンド・フィールの向上につながるのではないだろうか。

というわけで、あやふやな知識だったけどすっきりした。今後はAfter Effectsも触っていきたい。