React Native に組み込めるLottieアニメーションを作る
こんにちは🌿
Brewus,Inc. UIデザイナーのbellです。
とある案件にて、React Native でアプリ開発を行うことになり、アニメーションを Lottie で作成したので、実装までの流れをまとめました。
Lottieを使用した背景
・リッチなアニメーションを入れたい
・アニメーション実装にエンジニアの工数をあまり割けない
・デザイナーが After Efects に触れたことがある（ちょっとだけ）
01. 準備
この記事では、下記のことは詳しく説明していません。
・Lottieとは何か
・Lottieで何ができるか
・Lottieの導入方法
・Lottieの書き出し方法
Lottie導入と書き出し方法については、こちらを参考にしました。
02. Illustratorでパスデータ作成
Illustrator（以下Ai）でパスデータを作ります。
気をつけること
・テキストとパスをアウトライン化しておく
・透明度のあるオブジェクトを使用している場合は「 オブジェクト > 透明部分を分割・統合 」（詳しくは後述）
※不可逆な編集なので上記行う前のデータは別データで保存しておくことをおすすめします
・Aiで「 オブジェクト > 透明部分を分割・統合 」をする理由
AiデータをAeで取り込んだ後、Ae上でシェイプを作成すると全てのシェイプの不透明度が100%になってしまいます。
そのため、Aiデータに透明度のあるオブジェクトを使用している場合、下記の手順が必要になります。
（Ae上でシェイプを作成する手順は02へ）
①Aiデータ内で「 オブジェクト > 透明部分を分割・統合 」
②Aeデータ内で「 Aiレイヤーの上で右クリック > 作成 > ベクトルレイヤーからシェイプを作成 」
03. Illustratorデータを After Efects に読み込み
Aiデータを After Efects（以下Ae）にドラッグすればOK
気をつけること
・読み込んだAiデータはリンクが活きているため、rawデータを編集すれば変更が反映される
・「 Aiレイヤー上で右クリック > 作成 > ベクトルレイヤーからシェイプを作成 」を行なってしまうと、rawデータの変更は反映されない
・Aiデータをシェイプにするタイミング考察
Aiデータをシェイプにする前後で見た目が変わってしまうことがあるため、シェイプ作成は早めに行っておきたいところ。
しかし、パス数が多いとシェイプ作成に時間がかかるし、Aeの動作が重くなりがち。。
ということで、私がパス数多めのAiデータを扱うときは下記の流れで制作することが多いです。
① 一度シェイプ作成して、Ae上で見た目の問題がないか確認
② シェイプ作成前のAiデータを使ってアニメーション制作
③ Aiデータからシェイプを作成する（シェイプ作成前のAiデータはどこかに残しておく）
④ シェイプ作成後でないと正しく動作しないアニメーションをつける
⑤ Lottie書き出し → PCとアプリで動作確認
⑥ 修正点あれば②〜⑥の繰り返し
⑦ 問題なければ実機確認へ
できれば②の途中で③〜⑥は行っておきたいですね。
Ae上では、ほぼ完成した（と思った）ものをLottieで動かしたら壊滅的に壊れてるとか判明したらツラすぎるので。。
04. Lottie で できること できないこと
これだけで1記事できてしまうので、すでにまとめてくださっている方の記事を置いておきます。
05. Lottieの動作確認
Ae上で作成していたときと見た目や動きが変わってしまう恐れがあるため、動作確認は必ず行ってください。
できれば、いきなり本番制作ではなくテスト用のデータを作ってからブラッシュアップしていけると、予期せぬ不具合が減ると思います。
動作確認は下記のように進めました。
① https://lottiefiles.com/preview で確認（PC）
② Lottieアプリで確認（スマホ）：iOS版、Android版
➂ エンジニアに渡してアプリ（テスト環境）組み込み → 実機確認
06. Lottieの使いどころ
結論から言うと、Lottie はアイコンやローディングなど簡単なパスアニメーションに使うのが最適だと思います（前提として React Native でアプリ開発を行っています）。
iPhoneはほぼ問題なく動作しましたが、パス数の多いアニメーションはAndroid（と一部のiPhone）で下記のような問題が発生。
OS差というより端末のスペックに依るところが大きいようです。
・読み込みに時間がかかる
・アニメーションが途中で止まる
・アニメーションの一部が飛ぶ
初期構想では、フルスクリーンのアニメーションをLottieで組み込もうとしていたのですが断念。。
それなりにリッチなアニメーションを入れたかったので、クオリティを確保できる限界までパス数を落としても動作が重くなってしまいました。
結局、フルスクリーンアニメーションはmp4で組み込むことに。低端末だと動画読み込みに若干時間がかかるものの、途中でとまることはなくなりました。
今回の開発では、すべての対応端末で許容できる動作にするには json ファイルサイズは最大約10MBにしようという結論に至りました。
とはいえ、動作の良し悪しはjson ファイルサイズだけで決まるのではなく、おそらくは端末での描画の問題なので一度に描画するパス数に比例しているのではないか、というのが私の見解です。
ということで、基準となる限界値は持ちつつも、実機で動作に問題がないかを確認したうえでどうするかを適宜判断するのが良いと思います。
ちなみに作るだけならこれくらいパス数あっても問題なく書き出しできるようです（書き出し時間はかかる模様）。
まだまだLottie勉強中なので、またわかったことあれば都度記事にしていく予定です。
いただいたサポートは活動資金とさせていただきます🌿