【Lottie】Webと映像の融合ーLottieの使い方をアニメーター目線で解説

はじめに

初めまして。
フリーランスで映像編集やアニメーションの制作を行なっているバナコと申します。好きな食べ物はバナナです。

今回、Vookのアドベントチャレンジ2020ページに使用されているアニメーションを担当させて頂きました。とても可愛いイラストだったので、楽しく作ることが出来ました！
そこで利用した「Lottie」という機能がとても良かったので、アニメーター目線で作り方をご紹介します。
同じ映像クリエイターの方々が「Lottieを使いたい」とお客様に相談された際に、この記事が参考になると嬉しいです。

流れとしては、AfterEffects（以下AE）で作成してから指定の形式で書き出し、Webチームの方にLottieを利用して実装していただきました。

ポイントは３つです。
* 拡張機能のインストールさえ出来れば意外と簡単
* 使うことのできないAEの機能があるので、最初に作れるのか確認する
* 思わぬ所でつまずくことがあるので、小まめにプレビューしながら制作する

Lottieとは？

Webでアニメーションを表現する方法の一つで、AEで作れるので自由度が高いです。またパス情報などをテキスト形式(json)で出力し、SVGアニメーションとして表示するため、映像に比べてファイルサイズが軽く、Web上でどれだけ拡大しても綺麗な点が魅力です。

実際のところLottieでの実装はWebチームの方々で、我々映像クリエイターはAEで作成したアニメーションを指定のファイル形式で書き出す事ができればOKです！

Lottieでサポートされている機能を確認する

注意点としては、
Lottieは全てのAE機能がサポートされている訳ではありません。
まず制作する上で使いたいAEの機能が、Lottieでサポートされているかを確認する必要があります。

・公開されているアニメーションを見る

lottiefiles.comにアクセスすると、Lottieで実装されているアニメーションを見る事ができるので、おおよそどんなアニメーションが作れるのかを判断することができます。

・公式ページで確認

lottie supportedから、どの機能がサポートされていのるかを確認することができます。

とても相性が良いのは、今回のようにAIデータで作成されたパスのアニメーションです。
ただし、AIデータをAEに読み込んだ後、全てのレイヤーをシェイプ化する必要があります。またテキストも同じようにシェイプ化する必要があります。

右クリック＞作成＞ベクトルレイヤーからシェイプを作成

パスアニメーションが作れるので割と色々作れます。パスのトリミングやリピーターなど。

★サポートされている機能の一部（Lottieに向いている表現）
・パスアニメーション
・キーフレーム、イージーイーズ
・描画モード
・トラックマット
・マスクパス
・コンポジションinコンポジション
・親子関係

★サポートされていない機能の一部（2020,12月時点）
・3Dレイヤー
・エフェクト
・プラグイン
・エクスプレッション
・トラッキング
・レイヤースタイル
・タイムリマップ

エフェクトや3Dで表現したいアニメーションはLottieでは作れないと判断します。プラグインも使えません。エクスプレッションが使えないのは人によっては不便に感じるかもしれませんが、大体の機能は手動で何とかなると思うので、頑張ればいけます！個人的には、レイヤースタイルが使えるようになると嬉しいですね。

・制作過程でつまずいた点

・すべてのデータをシェイプ化する必要があり、その際、AE側の仕様で透明度と透過情報がリセットされます。手作業で元データに合わせる事になるため、アニメーションの表現で必要な場合以外は透過データは多用しない方が吉です。

・アンカーポイントの数が変動するとバグるので、シンプルに。アンカーポイントの数は変えず、方向線も増やしたり減らしたりしないように気をつけます。

・時間調節をしてフレームとフレームの間にキーフレームがあるとバグるので、ちゃんと綺麗なデータを作ろう・・・、

こういうキーフレームは問題が起きやすかったです。
mov等、映像データとして書き出す分には問題なかった作り方でも、今回の場合うまく表示されない事がありました。小まめにプレビューしながら、シンプルで綺麗なデータを作る事を心がけると良いと思います。

制作フロー

実際のところ、Lottieでの実装はWebチームの方々です。私たち映像クリエイターがやる事は、AEで作成したアニメーションをmp4などの映像ファイルではなく、jsonで書き出す事です。

AEからjsonを書き出すには、BodymovinというAEの拡張機能をインストールする必要があります。そして拡張機能をインストール出来るようにするには、ZXPInstallerをインストールする必要があります。紛らわしいですね（笑）

手順は下記のようになります。

制作フロー
1.ZXPInstallerをインストールする（AEの拡張機能をインストール出来るようになる）
2.AEの拡張機能「Bodymovin」をインストール
3.AEでアニメーションを作成
4.AEでBodymovinを使用して.json形式で書き出し
5.プレビューで確認する
6.納品

ZXPInstallerをインストール

こちらからダウンロード、インストール。
https://aescripts.com/learn/zxp-installer/

Bodymovinをインストール

こちらから。
https://github.com/airbnb/lottie-web
色々なファイルがダウンロードされますが、
今回はBodymovinだけインストールしたら他は必要ないです。

Bodymovinの場所
＞Lottie-web-master/build/extension/bodymovin.zxp

ZXP installerを開いてからbodymovin.zxpをドラック&ドロップすると、After Effectsで使えるようになります。

AEでアニメーションを作成

まずは簡単なアニメーションを作り、プレビューで問題なければ本格的な作業に入ると良いと思います。制作しているうちに、思わぬ所でサポートされていない機能に出くわすことがありますので、プレビューしながら作業を進めていくと良いと思いました。

Bodymovinを使用してjson書き出し

正常にインストールされていれば、AEを起動し「ウインドウ ＞ エクステンション」から「Bodymovin」を選択してウィンドウを表示することができます。

プロジェクト内のコンポジションが一覧で表示されています。これで書き出したいコンポジションをSelectedして、コンポジション名の右にある「…」から保存先と名前を指定。Renderをクリック→Doneをクリックでjsonが書き出されます。

書き出す前に「AfterEffects ＞ 環境設定 ＞ スクリプトとエクスプレッション」内の 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる ことを忘れずに！これにチェックを入れないとエラーが出て書き出せません。

プレビューで確認する

lottiefiles previewこちらのサイトに登録すると、作成したjsonファイルのプレビューをすることが出来ます。

ドラック&ドロップするとプレビューできます。

Publish to Publicを押さない限りは公開されません。

まとめ

自分が作ったアニメーションがそのままの動きでWebに反映されると嬉しいです。
Lottieを使用する場合、制作の手順を少し変える必要がありますが、思ったよりハードルは高くありません。個人的には想像以上に作りたい動きを実現できたと思っています。
それでもまだサポートされていない機能が多い事も事実なので、これからもっと充実されることを期待しています。

参考リンク

• lottie supported
• lottiefiles.com
• AirbnbのアニメーションライブラリLottie(ロッティー)の使い方
• WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】