モバイルでの Lottie のパフォーマンスの問題とバッテリーの消耗を解決するにはどうすればよいですか?

Lottie のパフォーマンスの問題は通常、プレーヤーではなくファイルに起因します。 After Effects を使用すると、携帯電話でフレームごとにレンダリングするとコストがかかる機能を簡単に追加できます。

ファイルから始めます。多くの場合、マスクとトラック マットが最大のコストとなります。可能な場合は、より単純な形状に置き換えてください。プレーヤーに不要なエフェクトやブラーを削除します。シェイプを結合し、レイヤー数を減らし、慎重にプリコンポーズします。大きな埋め込み画像はメモリとデコードのコストを増加させるため、最適化するかベクトルに置き換えます。無料の Lottie JSON ビューアなどの Lottie インスペクタは、ファイルの中身を確認するのに役立ちます。

次に、アプリがどのように再生するかを確認します。画面外、閉じたタブ内、またはスクロールして離れたリスト セル内でアニメーションがループし続けると、依然として CPU とバッテリーが消費されます。表示されない場合は一時停止し、不要なループを停止します。一度に数十のアニメーションを再生することは避けてください。

プラットフォームに適したオプションを選択してください。 Web では、SVG とキャンバス レンダラーのパフォーマンスがアニメーションに応じて異なるため、両方をテストします。圧縮された .lottie (dotLottie) 形式により、ダウンロード サイズが削減されます。 Android では、プレーヤーがサポートしているハードウェア アクセラレーションを使用してテストします。

最後に、ローエンドのデバイスで測定します。それでもアニメーションが重すぎる場合は、そのツールが仕事に適していない可能性があります。単純な CSS またはネイティブ アニメーションで装飾的なループを置き換えることができ、インタラクティブなコンポーネントは、当社が作成した Rive や ExodeUI などの状態ベースのツールに組み込んだ方がよい場合があります。