先日、Lottie（ロッティー）を使用したアニメーション制作をする機会があったので、備忘録も兼ねて所感を書かせていただきます。

これから制作を始める方の助けになれば幸いです。

実際にLottieに挑んだプロジェクトはこちら。ご参考までによかったらご覧になってみてください。

【HELLO SCOOTER サービスサイトプロジェクト】
https://uniel.jp/project/hello-scooter/

Lottieとjson

Lottieとは、特にモバイルアプリでAfter Effectsで制作したアニメーションを綺麗に再生できるアニメーションライブラリ（≒仕組み）のことです。

公式サイトには、Lottieで制作された様々なアニメーション作品が投稿されています。

かわいいローディングや、アイコンのアニメーションがたくさんあって、見ているとワクワクしてきますよ。
https://lottiefiles.com/popular

そして、このLottieでアニメーションを表現する場合、jsonという形式のファイル(以下json)を用います。

jsonは感覚としてはsvgと似ており、ざっくりいうと「JavaScriptの中でオブジェクトを表現するためのコードが書かれたファイル」です。この記事では、After Effectsで作ったアニメーションを正しくjsonで出力するまでのポイントを書いていきます。

After Effectsでjsonを出力する準備をする

はじめに、After Effectsだけではjsonを出力できないので、「Bodymovin」というプラグインを入れて環境を整えます。

下記URLからプラグインを導入できます。
https://www.adobeexchange.com/creativecloud.details.12557.html

※上記からの導入がうまくいかない場合は、ZXP Installerを用いた方法を試してみてください。

インストールが完了したら、タスクバーの [編集] ＞ [環境設定] ＞ [一般設定] の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れてください。

これでAfter Effectsで制作したアニメーションをjsonで出力することができるようになりました。導入したBodymovinの起動は [ウィンドウ] ＞ [拡張機能] ＞ [Bodymovin] から可能です。

出力したいコンポジションを選択・保存先を指定し、「Render」をクリックすれば出力されます。この時、前述の環境設定のチェックを入れ忘れると動かないので注意してください。

アニメーションさせるものをつくる

After Effects上でオブジェクトを配置して、それにアニメーションをつけていくこともできますが、Illustratorで作ったパスデータを取り込んでそれを動かした方が簡単なので、おすすめです。

この時、コンポジションにドラッグ&ドロップで配置したaiデータではjsonに出力されないので、配置したaiデータを [レイヤー] ＞ [作成] ＞ [ベクトルレイヤーからシェイプを作成] でシェイプに変換してください。

作成したシェイプレイヤーの方を編集し、jsonに書き出してください。

失敗談

初めて制作したときに失敗した点です。

1.先にも触れた通り、シェイプレイヤーに変換していないaiファイルは、画像のような扱いになるのでjsonで出力してもエラーになります。

2.サポートされていない機能もあるので注意してください。3Dレイヤー、レイヤー効果などは現在未対応のようです。

対応機能の一覧については下記の「Supported After Effects Features」をご参照ください。
https://github.com/airbnb/lottie-ios

特に、レイヤー効果については現在未対応のため、Illustratorでオブジェクトを制作をする際は通常モードで制作することをお勧めします。

余談ですが、欲しかった機能の一つである「タイムリマップ」が最近対応されたようです。このように、今後も対応機能が増えていくと思われるので、随時アップデートを確認すると良いです。

3.Lottieは、PCサイト(下記URL)にjsonデータをドラッグ&ドロップすることで、プレビューすることができます。
https://lottiefiles.com/preview

しかし、PCサイトのプレビューとスマートフォンのプレビューには差異が発生することもあります。

スマートフォンでの表示を検討している場合は、Lottieのプレビュー用のアプリを入れて、実機で動作を確認することをお勧めします。

最後に

Lottieは、社内のメンバーにお勧めされたことがきっかけで触り始めました。初めはいろいろと躓きましたが、私も様々な記事を読んで理解を深めつつあります。

調べると大体の解決策は出てくるので、興味がある方は是非チャレンジしてみてください。Lottieを用いたアニメーションの制作の利点は、エンジニア側の実装コストの軽減もありますが、体感で自分の理想とするアニメーションを制作できる点だと思います。

仕様や特徴を覚えて、ウェブサイトやアプリを華やかにしてみてはいかがでしょうか。

本記事は、緊急事態宣言により、外出自粛が要請される中、みなさまに少しでもおうち時間を有意義に過ごしていただけたらと、過去執筆した記事を加筆・編集し、アーカイブ記事としてご提供させていただいています。

みなさまのおうち時間がより良いものになりますよう、そして、新型ウイルス感染の収束をスタッフ一同願っております。