Lottie アニメーション ツールは、Bodymovin を使用して json 形式でエクスポートされた Adobe After Effects アニメーションを解析し、モバイル デバイスでネイティブにレンダリングする Android および iOS 用のモバイル ライブラリです。
Lottie を使用すると、エンジニアはコードを書き直すことなく、より豊かなアニメーション効果を簡単に作成できます。 Lottie を使用すると、エフェクトを表示するために Gif アニメーションを使用する必要がなくなりました。
現在、Lottie はパスのトリミング、マスキング、カバーなどの操作をサポートしています。頻繁に使用されるアイテムの読み込みを高速化するためのオプションのキャッシュ メカニズムもあります。このアプリの目標は、開発者やアニメーターがアプリのアニメーションをより簡単に作成できるようにし、それによって全体的なインタラクティブ性の要素を向上させることです。
1. アニメーションはデザイナーがプロのアニメーション制作ツール Adobe After Effects を使用して実現されており、アニメーションの実装がより便利になり、アニメーション効果が向上します。
2. フロントエンドは簡単にアニメーションを呼び出してアニメーションを制御できるため、フロントエンドアニメーションの作業負荷が軽減されます。
3. アニメーションのデザインと制作、フロントエンドでのアニメーションの表示、プロフェッショナルがプロフェッショナルな仕事を行い、分業が合理的である。
4. 売り手のショーは買い手のショーであり、修復レベルは100%です。
5. Lottie ソリューションを使用すると、JSON ファイルのサイズが GIF ファイルよりもはるかに小さくなり、パフォーマンスが向上します。
1. Lottie-Web ファイル自体はまだ比較的大きいですが、lottie.js のサイズは 513k で、gzip 圧縮後のサイズは 39k です。したがって、lottie-webの読み込みには注意する必要があります。現在、H5 プロジェクトにはオフライン パッケージがあり、PC プロジェクトも PWA にアップロードされ、読み込み速度を確保するためにキャッシュされます。
2. Lottie アニメーションは実際には svg アニメーション/キャンバス アニメーションとして理解でき、既存の HTML にアニメーション効果を追加することはできません。
3. 現在、アニメーション JSON ファイルのエクスポートでは、AE のパラメーターが 1 つずつ JSON コンテンツにエクスポートされますが、デザイナーが多数のレイヤーを作成する場合、比較的大きな JSON ファイル (20kb) の問題が依然として発生する可能性があります。デザイナーは特定の規範に従う必要があります。
4. Lottie が実装できない AE アニメーション効果がごく少数ありますが、その一部はパフォーマンスの問題によるものであり、一部は実行されません。例: ストロークアニメーションなど。