LottieFiles クラスター7 分で読めます·ExodeUI チーム
React での Lottie の最適化: バンドル サイズと CPU 消費量の削減
React アプリで Lottie アニメーションを最適化し、JavaScript バンドルの影響を軽減し、静的な JSON をインタラクティブな ExodeUI ステート マシンに移行する方法を説明します。
要点まとめ
核心
Lottie-Web または Lottie-React を使用して React で Lottie を実行すると、アニメーション JSON を解析してフレームごとにレンダリングするプレーヤーをロードすることになります。小さな装飾アニメーションの場合は、通常の CSS の方が軽いことがよくあります。インタラクティブなランタイムの場合は、ExodeUI や Rive などの状態ベースのランタイムの方が適している可能性があります。変更の前後でバンドル サイズと CPU を測定します。
Lottie のコア ウェブ バイタルへの影響
Lottie アニメーションは、最初のページ読み込み中に実行されると、合計ブロック時間 (TBT) と最大コンテンツフル ペイント (LCP) の回帰を頻繁に引き起こします。 Lottie は JavaScript のすべてのフレームで行列変換を評価するため、低電力モバイル デバイスでは大幅なバッテリー消耗とフレーム低下が発生します。
実装コード例
インタラクティブコンポーネントの実装
// A small decorative "like" pop in plain CSS instead of a Lottie file.
// No player needed; measure your own bundle and CPU before and after.
export function LikeHeart({ active }) {
return (
<svg className={active ? 'heart heart--active' : 'heart'} viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 21s-7-4.4-9.3-8.6C1 9.2 3 5.5 6.6 5.5c2 0 3.4 1.1 4.4 2.5 1-1.4 2.4-2.5 4.4-2.5 3.6 0 5.6 3.7 3.9 6.9C19 16.6 12 21 12 21z" />
</svg>
);
}
/* CSS
.heart { fill: #ccc; transition: fill 150ms; }
.heart--active { fill: #ff4a1c; animation: pop 320ms cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart--active { animation: none; } }
*/