Lottie React Native

あなたは現在、2つの状況のいずれかにいるかもしれません。あるいは、デザイナーがあなたにLottie JSONを渡し、「今日中にアプリに追加できるか？」と尋ねているかもしれません。あるいは、既にセットアップしていて、アニメーションが開発環境で動作することを確認した後、実際のデバイス、起動時間、リリースビルドがアニメーションに費やされるコストを増やしていることに気づいたかもしれません。

Lottie React Nativeはここで面白くなります。基本的なデモは簡単です。生産用の実装はそうではありません。違いは、インストール方法、再生の制御、動画ファイルをパフォーマンスの予算として扱うかどうかで決まります。

LottieはReact Nativeアプリに不可欠な理由
- デザインとエンジニアは同じ戦いをしない
- Lottieが最も適している場所
Lottie開発環境を設定する
最初のLottieアニメーションを表示する
Lottie アニメーション制御のマスター
生産アプリのパフォーマンスチューニング
Lottie の一般的な問題のトラブルシューティング

なぜLottieはReact Nativeアプリに不可欠か

React Nativeで手作業でポリッシュした製品アニメーションを再現したことがある人は、痛みを知っている。小さな動きの詳細はタイミングロジック、補間、プラットフォームの特性に変わり、アニメーションは近いように見えるが、「近い」はデザイナーが送り込んだものとは違う。

Lottieはそのワークフローを変えた。Airbnbは2016年にLottieをオープンソース化し、それによりモバイルアニメーションを変え、デザイナーは直接アニメーションを送り込むのではなく、エンジニアにフレームごとに再構築するのを強制するのではなくした。企業環境では、そのシフトによりモバイルアプリ開発コストが40%以下に削減された AirbnbのLottieの概要デザインとエンジニアリングは同じ戦いをしなくなった Lottie React Nativeの主な利点は「JSONでアニメーションが見えるだけ」ではない。デザイナーはAfter Effectsで作業し、Bodymovinでエクスポートする。開発者はネイティブバックアップされた再生で出力をレンダリングするのではなく、カスタム__CAPGO_KEEP_0__に動きを翻訳するのではなく。.

それは重要な理由である。アニメーション作業は広がりがちである。単一の祝賀的な状態アニメーションはデザインレビュー、製品レビュー、Androidの動作、iOSの動作、アクセシビリティ、起動パフォーマンスなどに影響を与える。Lottieはその表面面積を狭める。

A key benefit of Lottie React Native isn’t just “pretty animations in JSON.” It’s the separation of concerns. Designers work in After Effects and export with Bodymovin. Developers render the output with native-backed playback instead of translating motion into custom code.

Lottieを使用するのは、アニメーションが製品エクスペリエンスの一部である場合に限る。単純な不透明度または変換トランジションの場合に限る。

Lottieは必要な場合に限る。 アニメーションは製品エクスペリエンスの一部である場合に限る。

動画はユーザー体験の角度もあります。動きはフィードバックを与え、行動を確認し、ロード中の状態を死んでいるように感じさせます。チームが真剣にポリッシュ、再利用、またはインターフェイスへの信頼について考えている場合、動画はその議論の重要な部分です。より広いアプリのユーザー体験の議論は通常、同じ場所に終わります: 静的な画面よりも早いフィードバックが勝つ。

Lottieが最も適している場所

Lottie React Nativeは、以下のシナリオで最もよく機能します。

ブランドのマイクロインタラクション いいね、保存、チェックマーク、購入成功状態
オンボーディングのイラスト ビデオを配信せずにカスタムに感じる必要がある
ロード中の状態 静的なUIが未完成のように感じる
機能の教育 動きを追加する際にGIFやMP4を埋め込まない場合

What it doesn’t solve is every animation problem. For basic screen transitions, React Native’s own animation tools are often simpler. For very large or highly interactive motion systems, the JSON format can become a trade-off instead of a win. That trade-off becomes more important once you hit production, which is where most tutorials stop too early.

ロティの開発環境を設定する

インストールのパスは、最初に1つの決定に依存します: Expo管理ワークフローまたはBare React Native. Don’t mix the mental models. Most setup problems happen when developers follow a bare workflow guide inside Expo, or assume Expo abstracts every native detail away.

ロティアニメーションのセットアップ手順のフローチャート

まず、ワークフローを選択してください

アプリがExpoで動作し、最速のセットアップが必要な場合は、Expoのパスに留まることをお勧めします。ただし、カスタムネイティブワークが必要な場合は、通常のネイティブ依存関係としてインストールし、iOSとAndroidの両方のビルドを検証してください。

多くのチームは、セットアップがプロジェクトのタイプと一致している場合にデバッグが簡単になることを過小評価しています。そうでない場合、カスタムネイティブ統合を実装するチームは早期にExpo開発クライアントワークフローに移行する傾向があります。 Expo開発クライアントワークフロー instead of waiting until the app gets harder to change.

Expo管理セットアップ

Expo管理アプリの場合、最小限に抑えましょう。

パッケージをインストール
```
npx expo install lottie-react-native
```
メトロを再起動
```
npx expo start -c
```
デバイスまたはエミュレータで確認 ローカルJSONファイルから始めて、非常に小さなアニメーションをレンダリングしてください。大きなアセットと新しいインストールを同時にデバッグしないでください。

Expoに関して、いくつかの実用的な注意点があります。

ローカルファイルを優先してください: リモートアニメーションデバッグは、ライブラリが正常に動作していることを証明しようとしている場合にのみネットワークノイズを追加します。
リリース時の動作を早くテストしてください: 開発モードでは、タイミングやパフォーマンスに関連する問題が隠される可能性があります。
アセットパスを監視してください JSONファイルの配置が不正なのは、最も一般的な「何も表示されない」原因の1つです。

Expoは「機能する」までの最短ルートですが、「拡大する」までの最短ルートではありません。

Bare React Native設定

バーレスプロジェクトでは、ネイティブ依存関係をすぐにインストールして検証する必要があります。

パッケージをインストールする
```
npm install lottie-react-native
```
iOS Podsをインストールする
```
cd ios && pod install && cd ..
```

アプリケーションを再構築する

npx react-native run-ios

または

npx react-native run-android

Capacitorライブアップデートの代替手段の比較ページ

Capawesomeの比較ページ

コンサルティングサービスページ	なぜ重要か
インストール後は再構築	ネイティブモジュールは最新のコンパイルが必要
実行 `pod install`	iOSでは必ずしも信頼できる
シンプルなローカルJSONを使用する	アセット問題とインストール問題を分離する
両方のプラットフォームを早期にテストする	AndroidとiOSは異なる理由で失敗する可能性がある

パッケージがきちんとインストールされた場合でも最初のアニメーションが表示されない場合、それは通常インストールの問題ではなく、アセットパス、コンポーネントサイズ、再生設定の問題である

最初の動作するアニメーションは面白くない。ローカルファイル。固定サイズ。自動再生。ループは任意。条件付き再生、リモートJSON、または重層的なアニメーションエクスポートから始めるのは避ける

最初の動作するアニメーションを表示する

A modern developer workspace with a laptop displaying code and a monitor showing a mobile animation app.

ローカルアニメーションファイルを追加する

アセットフォルダを作成する必要がある場合、以下の手順に従ってください。

assets/
  animations/
    success.json

名前は単純にし、スペース、奇妙な記号、多くの階層を持つフォルダを避けましょう。パスは明確でなければなりません。 require() ローディング画面や起動後のハンドオフにLottieを使用する場合は、起動パスに大きなアニメーションを配置することの影響を考慮する必要があります。特に、React Nativeのスプラッシュスクリーン動作を調整している場合に限ります。

LottieViewを使用してレンダリングする Dedicatedコンポーネントを作成するのではなく、大きな画面ファイルに直接追加しないようにしましょう。.

3つの便利なことを実行します。

ライブラリが正しくレンダリングされることを確認します。

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export function SuccessAnimation() {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('../assets/animations/success.json')}
        autoPlay
        loop={false}
        style={styles.animation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: 220,
    height: 220,
  },
});

アセットパスが正しく解決されることを確認します。

アセットパスが正しく解決されることを確認します。
ライブラリが正しくレンダリングされることを確認します。
__CAPGO_KEEP_0__は、再生とサイズ調整の後で、1つの隔離された場所を提供します。

__CAPGO_KEEP_0__の基本を省略すると、すぐにいくつかの注意点が現れます。

幅または高さが指定されていない: アニメーションは存在するが、見えません。
悪い: require() パス: Metroはファイルを見つけることができません。
無効なエクスポート: 技術的に有効なJSONファイルもあるが、モバイル上で期待どおりに動作しない機能を含んでいます。

__CAPGO_KEEP_0__の最初のレンダリングをローカルで決定論的におきましょう。統合テストを実行しているので、構造をテストする必要はありません。

__CAPGO_KEEP_0__の最初の画面テスト

コンポーネントをシンプルな画面に配置し、背景が中立的な色の場合

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SuccessAnimation } from './src/SuccessAnimation';

export default function App() {
  return (
    <SafeAreaView style={styles.screen}>
      <SuccessAnimation />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

iOSとAndroidのシミュレータで両方とも機能するようになったら、最初の実際のハードルをクリアしたことになります。そこから、次のステップはアニメーションを追加することではありません。デclarative propsを使用するタイミングと、refsを直接制御するタイミングを学ぶことです。

Lottieアニメーションコントロールのマスター

Lottie React Nativeの多くのバグは、アニメーションが状態に反応する必要があるときに発生します。autoplayは簡単です。「ユーザーがアイテムを好きになったときにこのセグメントを再生し、ユーザーがアイテムを好きにならなかったときに逆再生し、コンポーネントが再レンダリングされてもチラチラとしないようにする」は、混乱するところです。

Lottieにおけるデclarativeとイマペラティブアニメーション制御メソッドの比較チャート。特定の用途に応じた使用例を強調しています。

プロパティを使用するには、再生が単純な場合

非インタラクティブな再生の場合、プロパティは十分です。

<LottieView
  source={require('../assets/animations/loading.json')}
  autoPlay
  loop
  speed={1}
/>

このスタイルは次の場合に適しています。

ローディングインジケータ
パッシブなオンボードイングイラスト
装飾的な空の状態

デclarativeであり、読みやすいです。コンポーネントがマウントされ、再生が始まり、Reactが制御を握ります。アニメーションロジックがすべてプロパティによって説明できる場合、そこに留めましょう。

より高度なデclarativeケースは progressアニメーションのフレームを別の値と紐づける方法があります。動きが外部の進行源によって反映される場合、うまく機能しますが、一時的なトリガーイベントの場合、便利ではありません。

ここでは、リファレンスを使用する前の比較を簡単に視覚化します。

状態がアニメーションを制御する場合、リファレンスを使用します。

ユーザーがタップ、スイッチ、またはアクションを完了したとき、リファレンスは通常、より安全なツールです。実世界のデータはハイブリッドフレームワークを使用する開発者が68％、 useEffect hooksで不適切なリファレンスハンドリングによるアニメーショントリガーの失敗を報告しています。これは、 animation.current.play() __CAPGO_KEEP_0__に焦点を当てた失敗したトリガーの議論の Capacitor-focused discussion of failed triggers.

信頼できるいいねといいねのパターン

import React, { useRef, useState } from 'react';
import { Pressable } from 'react-native';
import LottieView from 'lottie-react-native';

export function LikeButton() {
  const animationRef = useRef<LottieView>(null);
  const [liked, setLiked] = useState(false);

  const onPress = () => {
    if (!animationRef.current) return;

    if (liked) {
      animationRef.current.play(60, 0);
    } else {
      animationRef.current.play(0, 60);
    }

    setLiked(!liked);
  };

  return (
    <Pressable onPress={onPress}>
      <LottieView
        ref={animationRef}
        source={require('../assets/animations/like.json')}
        loop={false}
        autoPlay={false}
        style={{ width: 96, height: 96 }}
      />
    </Pressable>
  );
}

このパターンは、実行中で機能することが多いです。アニメーションを呼び出す代わりに

__CAPGO_KEEP_0__ play() 内部 useEffect 状態の変化が毎回発生する。

なぜ機能するか:

イベントはアニメーションのトリガーを所有している: プレスイベントは再生を開始する安定した時点である。
参照はローカルで永続的である: useRef 不要な再レンダリングを避ける。
コンポーネントは自動再生の競合を避ける: マウントの挙動とユーザーがトリガーした挙動が相反することは避けたい。

避けるべき一般的なミス:

参照が存在する前にトリガーする
もし animationRef.current nullの場合、再生は行われません。保護してください。
使用 autoPlay 命令形式のコントロール
再生のデフォルトの所有者を1つ選択してください。
すべてを駆り立てる useEffect
効果は便利ですが、UIアクションの場合、タイミングの問題を追加するのではなく、削除するのではなく、問題を引き起こします。

アニメーションがタップに反応する場合、タップハンドラー内でトリガーするようにします。外部の真実の源が存在する場合にのみ useEffect パフォーマンスチューニング

Lottie React Nativeは、チームがアプリバンドルに大きなJSONファイルを詰め込み始めると、起動時間が悪化した原因を理解できない軽量なライブラリのように見えるものです。アニメーション自体は常に問題ではありません。配信戦略が問題です。

パフォーマンスチューニングの3つの主な利点を示すインフォグラフィック: バンドルサイズの削減、フレームレートの向上、メモリ使用量の低下。

チームがトラブルに陥る場所

パフォーマンスチューニングのためのガイド

JavaScriptで直接アニメーションをバンドルし、すべてのものを早すぎるように読み込むのは、最も簡単な間違いです。このガイドに従って、Lottie JSONを正しく配信するJSバンドルにLottie JSONなどのアセットをオーバーロードすると、 中級機器ではアプリ起動時間が40%以上増加する、そして、必要に応じてロードするために、ネイティブアセットに移動することは、重要な最適化です。

実践で多くのチームが見るように、問題は単一の小さな成功アニメーションではありません。

それが山積み:
オンボーディングモーション
ローダーステート
ECOMMERCEの反応
ブランドの空のスクリーン

ロケールファイルとその他のバンドル重いアセットが並んでいます。

最初に何を最適化するか

エクスポート自体から始めましょう。アニメーションエクスポートが粗悪な場合、後でパース、メモリ、レンダリングの安定性でコストがかかります。デザイナーのエクスポートをすべて受け入れるのではなく。

このプロダクションチェックリストを使用してください:

JSONを圧縮して配信する: 小さいファイルはロードしやすく、起動時に膨らむ可能性が低くなります。
非批判的なアニメーションをJSバンドルから移動する: Keep launch code focused on what the app needs immediately.
アニメーションをオンデマンドでロードする: 画面またはアクションが必要なときにレンダリングする。
古いデバイスの挙動を検証する: モダンシミュレータは高コストの再生を隠す可能性があります。
大きなLottieファイルを起動時装飾として使用しないようにしてください: 初期インタラクションに影響しない場合は、アプリ起動と同時に実行しない。

モバイルパフォーマンスの取り組みをしているチーム向けモバイルパフォーマンスのガイド __CAPGO_KEEP_0__アプリのアニメーション性能の指針

真実の一つ 遅延するアニメーションは、通常、デザインの勝ちではなく、製品のバグです。

React Nativeを孤立して考えるのではなく、チームはハイブリッドスタックで働いています。同様のアセットロードの問題に直面し、より広範な Capacitorアプリのアニメーション性能の指針ローカルファイルとリモート配信

ローカルファイルは予測可能です。オフラインでも動作し、ネットワークの変動を排除し、テストも容易です。ただし、過度にバンドルするのも簡単です。

リモート配信はバイナリを軽量に保つことができますが、アニメーションの可用性、キャッシュ、フォールバックに関する懸念が生じます。非批判的な動作の場合、このトレードオフは受け入れ可能です。主なUX状態である購入確認や認証成功の場合、リスクが高まります。

Remote delivery keeps the binary leaner, but now your animation has availability, caching, and fallback concerns. That trade-off is acceptable for non-critical motion. It’s risky for primary UX states like purchase confirmation or authentication success.

A practical split works well:

アセットタイプ	デフォルトの設定
コアのインタラクションアニメーション	ローカルで最適化され、オーバーサイズではない
まれに使用されるプロモーションアニメーション	リモートでフォールバック
起動パスアニメーション	ローカルにのみ必要な場合
まれに使用される機能のイラスト	オンデマンドロード

このセクションのルールのうち1つだけを適用する場合は、この1つを使用してください: パフォーマンスに敏感な Lottie JSON を装飾として無害なものとみなさない.

一般的な問題のトラブルシューティング

Lottie が機能しない場合、原因は通常、普通のものです。間違ったパス。サイズが欠けている。リファレンスタイミングが悪い。重い JSON。デバッグの最速方法は変数を減らすことです。

Android 上でアニメーションが表示されない

最初に JSON ファイルが解決されることを確認し、コンポーネントに明示的な寸法を与えます。

<LottieView
  source={require('../assets/animations/success.json')}
  autoPlay
  style={{ width: 200, height: 200 }}
/>

問題が解決しない場合、別の知られている良い動画に置き換えます。その場合、問題はファイルかセットアップかを判断できます。

古いデバイスで再生が乱れる

This usually points to the asset, not the component API.

試してみる方法があります:

アニメーションの複雑さを減らす: ソースファイルが重い場合は、軽量なエクスポートを要求してください。
後で読み込む: 競合する初期画面作業に挑戦しないように。
圧縮されたバージョンをテストしてください。 圧縮ファイルが良好に動作する場合、ボトルネックが見つかりました。
複数の同時Lottieビューを削除してください。 1つの画面に複数のアニメーションを表示すると、過剰な負荷になります。

リファレンスがnullまたは再生が何もしない

リファレンスがnullの場合、トリガーがマウント前に発火したり、コンポーネントが条件付きで削除されたりすることがあります。

if (animationRef.current) {
  animationRef.current.play();
}

リファレンスを安定させて useRef不要にアニメーションコンポーネントを再作成しないようにしてください。ローカルビルドで繰り返し不思議な不具合をデバッグしている場合、古いキャッシュをクリアすることが役立ちます。簡単な Yarnキャッシュクリーンアップルーチン開発中の不正なアセットの動作を排除するために、時々十分です。

アニメーションは画面サイズによって正しく表示されません

アニメーションがレイアウトを定義するのではなく、意図的にサイズを設定したコンテナ内に配置する。

固定サイズのアイコンとリアクションを使用します。
より大きなイラストのためのアスペクト認識対応のラッパーを使用します。
フル幅に伸ばすことなく、エクスポートされた組み合わせの意図を確認することなく、伸ばすのを避けます。

ほとんどの「Lottieは壊れた」報告はレイアウト問題、資産問題、タイミング問題で、ライブラリはよくよく見てみると、よく何も間違っていないことが多い。

最終的なデバッグのショートカットが必要な場合は、すべての高度なプロパティを削除し、中央のビュー内でローカルアニメーションをレンダリングし、そこから再構築して問題をより速く分離する方法があります。

Capgoは、CapacitorアプリにJavaScript、資産、設定の修正を送信するためにチームを支援するのに役立ちます。ストアのレビューを待つ必要がなく、ハイブリッドアプリを維持する場合、安全な更新を送信し、ステージドロールアウトを取り扱い、フロントエンドの問題から迅速に回復する必要がある場合、Capgoはご覧になりたいものです。 Capgo 著者