Lottieとは何か、アニメーション、モバイルプラットフォームでの仕組み

Lottieとは何か、その仕組み

Lottieは、2015年にAirbnbが作成した、ベクターアニメーションをリアルタイムでレンダリングするためのオープンソースライブラリです。開発者はAdobe After Effectsでアニメーションを作成し、Bodymovinプラグインを介してJSONにエクスポートし、Lottieはターゲットデバイス上でレイヤー、シェイプ、透明度、アニメーション曲線を解釈してそのJSONを再生します。

動画ファイルやGIFとは異なり、Lottieは解像度に依存しません — アニメーションはベクターとしてレンダリングされ、どのDPIのデバイスでも同じように表示されます。JSONアニメーションは平均して同等のGIFや動画よりも5〜10倍小さく、帯域幅が限られたモバイルアプリケーションにとって重要です。

Airbnb Engineeringによると、Lottieの採用により、Precomposed動画シーケンスと比較してアプリ内のアニメーションサイズが80%削減され、すべてのサポート対象デバイスで60 FPSを維持しました。現在、LottieはiOS、Android、Flutter、React Native、Web（HTML CanvasおよびSVG）、およびデスクトッププラットフォームでサポートされています。

Lottieのパフォーマンスはネイティブレンダリングに由来します：iOSではCALayerを使用したCore Animation、AndroidではJNIを介したC++による独自のCanvasレンダラーを使用します。これにより、ミッドレンジのデバイスでも数十のレイヤーを持つ複雑なアニメーションをフレームドロップなしで再生できます。WebViewベースのソリューション（GIF、APNG、動画）とは異なり、Lottieはレンダリング用に別のプロセスを作成せず、フレームデコード用に余分なメモリを消費しません。

読み込みインジケーター、マイクロインタラクション付きアイコン、オンボーディング画面、滑らかさとファイルサイズの小ささが重要なプロモーションアニメーションにLottieを使用してください。

Lottieエコシステムには、8つのプラットフォーム向け公式プレーヤー、ブラウザプレビュー用のLottieFilesエディター、数千の既成アニメーションを備えたマーケットプレイスが含まれています。開発者はJSONをダウンロードし、プロジェクトに統合し、After Effectsを開かずにデザインシステムに合わせて色と速度を調整できます。LottieFilesはAIRリンクを介してアニメーションを読み込む機能を備えたSDKも提供しており、App StoreやGoogle Playにアプリの新しいバージョンを公開せずにデバイス上のアニメーションを更新できます。

LottieのJSON形式とBodymovin

LottieのJSONスキーマは、ベクターアニメーションを記述するためのオープンスタンダードであり、コンポジション、レイヤー、シェイプの3つのレベルで構成されています。コンポジションにはメタデータ（キャンバスサイズ、フレームレート、期間）が含まれます。

JSONの構造

ルートJSONオブジェクトにはlayersフィールド — アニメーションレイヤーの配列が含まれます。各レイヤーは、シェイプレイヤー、イメージレイヤー、テキストレイヤー、またはPreCompレイヤーになります。各レイヤーには、キーフレームに結び付けられたトランスフォームプロパティ（位置、スケール、回転、不透明度）が定義されます。

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

キーフレームは、タイムスタンプ、値、および補間用のベジェ曲線を持つ配列として定義されます。BodymovinはAfter Effectsの曲線を自動的にLottie互換形式に変換し、フレームレベルの精度でタイミングとイージング関数を保持します。

Bodymovin — エクスポートプラグイン

Bodymovinは、コンポジションをLottie JSONファイルにエクスポートするAdobe After Effects拡張機能です。このプラグインは、シェイプ、マスク、エフェクト、テキストレイヤー、トラッキングなど、After Effectsのほとんどの機能をサポートしています。3Dレイヤーといくつかのプラグインには制限があります — これらはエクスポートされず、アニメーションを2Dに簡略化する必要があります。

iOSでのLottie統合

iOSでは、LottieはSwift Package Manager、CocoaPods、またはCarthageを介して統合されます。メインクラスは、SwiftUI用のLottieViewとUIKit用のLottieAnimationViewです。lottie-iosパッケージは、バンドル、ネットワーク、Dataオブジェクトからのアニメーションをサポートしています。

SwiftUIのLottieView

LottieViewは、バンドルからのJSONファイル名またはネットワーク読み込み用のURLを受け入れるSwiftUI用のViewコンポーネントです。アニメーションは指定された速度と繰り返し回数で自動的に再生されます。

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

UIKitでは、LottieAnimationViewが使用され、Interface Builderまたはプログラムで設定できます。このViewは、play、pause、stopのすべてのアニメーション状態と、データ読み込み用のプログレスバーをサポートしています。LottieAnimationViewは、リスト内のアニメーションアイコン用にUITableViewCellやUICollectionViewCellに埋め込むことができます — スクロール時にアニメーションは一時停止し、セルが画面に表示されると再開されるため、CPUとGPUのリソースを節約できます。

最新のiOS開発では、SwiftUIとLottieを組み合わせてアニメーション化されたオンボーディング画面やインタラクティブ要素を積極的に作成しています：スクロール時にScrollViewReaderを介してアニメーションの進行状況がスクロール位置と同期します。これにより、アニメーションがユーザーの指の動きに継続的に追従するパララックス効果が生まれ、重い動画ファイルを使わずにエンゲージメントを高めます。

再生制御

iOSのLottieプレーヤーは、特定のフレームから別のフレームまでの再生、KeyPathsを介した塗りつぶし/ストローク色の変更、LottieAnimationDelegateを介したイベントのリッスンためのAPIを提供します。パフォーマンスを最適化するために、スクロール中にアニメーションを一時停止し、停止時に再開できます。

AndroidでのLottie統合

Androidでは、LottieはGradle依存関係com.airbnb.android:lottieを介して追加されます。メインコンポーネントはLottieAnimationViewで、XMLレイアウトに通常のViewとして配置し、属性またはプログラムで設定できます。

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

XMLレイアウトでは、LottieAnimationViewは属性を介して設定されます：lottie_rawRes（res/raw内のJSONへの参照）、lottie_autoPlay、lottie_loop。ネットワーク読み込みはlottie_urlまたはプログラムでsetAnimationFromUrlを介してサポートされています。Android版Lottieは、ハードウェアアクセラレーションに依存しない独自のCanvasレンダラーを使用します。

RawResとネットワークからの読み込み

静的なアニメーションの場合、JSONはres/rawに配置され、RawResを介して参照されます。動的なアニメーションの場合、LottieはURLまたはDataオブジェクトからJSONを読み込み、ダウンロードの進行状況を示すコールバックを提供します。Lottieキャッシュは、読み込まれたアニメーションを自動的にメモリに保持し、再レンダリング時の再ダウンロードを防ぎます。

Android向けLottieは、リストアイテムに直接埋め込まれたLottieAnimationViewを介してRecyclerViewでのアニメーションをサポートしています。パフォーマンス最適化のため、遅延読み込みでsetAnimationを使用し、RecyclerView.OnChildAttachStateChangeListenerコールバックを介して画面外の要素のアニメーションを無効にすることをお勧めします。これにより、アニメーションアイコンを含む長いリストをスクロールする際のFPS低下を防ぎます。

Lottieアニメーションのカスタマイズと制御

Lottieは、元のAfter Effectsファイルを変更することなく、既成のアニメーションをカスタマイズするための強力なAPIを提供します。これにより、1つのアニメーションを異なるテーマ、色、アプリケーションサイズに適応させることができます。

KeyPathによる色の変更

塗りつぶしとストロークの色は、KeyPath（アニメーション要素への文字列パス）を介して実行時に変更できます。例えば、カートアイコンの色を赤から青に変更するには、そのKeyPathを見つけて新しい値を適用するだけです。これにより、異なるカラースキームごとに同じアニメーションの複数バージョンを保存する必要がなくなります。

速度と進行の制御

各Lottieアニメーションは、速度（animationSpeed）、進行度（setProgress）、フレーム範囲（play(fromFrame:toFrame:)）で制御できます。進行モードでは、アニメーションをスクロールジェスチャーと同期できます：画面をスクロールするほどアニメーションが進行します — これはオンボーディングやパララックス効果で一般的な手法です。