Lottie React Native

あなたは現在、2つの状況のいずれかにいるかもしれません。あるいは、デザイナーからLottie JSONを渡され、「今日中にアプリに挿入できるか？」と尋ねられたり、既にセットアップしてアニメーションが開発環境で動作するのを見たが、実機、起動時間、リリースビルドが含まれると、実際のデバイスではアニメーションが高価に感じられるようになったりします。

Lottie React Nativeが面白くなるのはその時です。基本的なデモは簡単です。生産用の実装はそうではありません。違いは、どのようにインストールするか、動画の再生を制御するか、動画ファイルを無害なアセットとして扱うか、パフォーマンスの予算として扱うかという点にあります。

Lottie React Native アプリの重要性
- React Native アプリのデザインとエンジニアリングは戦う必要がない
- Lottie の適切な位置
Lottie 開発環境の設定
最初の Lottie アニメーションの表示
Lottie アニメーション制御のマスター
生産アプリのパフォーマンスチューニング
Lottie の一般的な問題のトラブルシューティング

LottieはReact Nativeアプリの重要な要素です

React Nativeで手動でポリッシュした製品アニメーションを再現することは、開発者にとって大きな苦労です。小さな動きの詳細はタイミングロジック、補間、プラットフォームの特性に変わり、アニメーションは近いように見えますが、「近い」はデザイナーが送り付けたものではありません。

Lottieはこのワークフローを変えました。Airbnbは2016年にLottieをオープンソース化し、それによりデザイナーは直接アニメーションを送り付けることができ、エンジニアがフレームごとに再構築する必要がなくなりました。 Lottie React Nativeの主な利点は「JSONでアニメーションを表示することだけ」ではありません。デザイナーはAfter Effectsで作業し、Bodymovinでエクスポートします。開発者はネイティブバックアッププレイバックを使用して出力をレンダリングします。これは重要です。アニメーション作業は広がりがちです。単一の祝賀的な状態アニメーションはデザインレビュー、製品レビュー、Androidの動作、iOSの動作、アクセシビリティ、スタートアップパフォーマンスに影響を与える可能性があります。Lottieはその面積を狭めます。実用的なルール:.

アニメーションが製品エクスペリエンスの一部である場合にのみ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はReact NativeアプリのアニメーションをJSONで表現するためのオープンソースのライブラリです。デザイナーはAfter Effectsでアニメーションを作成し、Bodymovinでエクスポートします。開発者はネイティブバックアッププレイバックを使用して出力をレンダリングします。 Lottieはアニメーション作業の面積を狭め、デザインとエンジニアリングの間の戦いをなくします。

There’s also a user experience angle. Motion gives feedback, confirms actions, and makes loading states feel less dead. If your team is thinking seriously about polish, retention, or trust in the interface, animation is part of that conversation. The broader アプリのユーザー体験の議論通常は同じ場所に終わる: フィードバックが速い静的な画面よりも

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.

Lottie開発環境の設定

The install path depends on one decision first: 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.

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

Choose the workflow before you install

If your app lives in Expo and you want the fastest setup, stay on the Expo path unless you know you need custom native work. If you’re in a bare app, or you already rely on native modules that need direct control, install it as a normal native dependency and validate both iOS and Android builds immediately.

A lot of teams underestimate how much easier debugging becomes when you keep your setup aligned with the project type. That’s also why many teams building custom native integrations move early to an Expo開発クライアントワークフロー instead of waiting until the app gets harder to change.

Expo管理設定

Expo管理アプリの場合、最小限に抑えてください。

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

Expoでは、実用的な注意点が数点あります。

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

Expoは「正常に動作する」までの最短ルートですが、「拡大する」までの最短ルートではありません。

Bare React Native設定

バーレスプロジェクトでは、インストールとnative依存性の検証を行う必要があります。

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

アプリの再構築

npx react-native run-ios

または

npx react-native run-android

インストール後、正しくコンパイルされていないnative依存性がアプリに組み込まれていない場合、ホットリロードでは救済されません。

時間を節約するバーレスワークフロー

インストール後、次の短いチェックリストを使用してください:

チェック	なぜ重要か
__CAPGO_KEEP_0__	インストール後は再構築する必要があります
Run `pod install`	iOSでは必須です
ローカル JSONファイルを使用して始めましょう	アセットの問題とインストールの問題を分離する
両方のプラットフォームで早期にテストする	AndroidとiOSは異なる理由で失敗する可能性があります

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

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

最初の動作するアニメーションは面白くない。ローカルファイル。固定サイズ。自動再生。ループは任意。条件付き再生、リモートJSON、または複雑なレイヤーExportから始めるのは避けるべきです。

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

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

アセットフォルダを作成する: すでにない場合は

assets/
  animations/
    success.json

名前は簡単にしろ。スペース、奇妙な記号、多くの階層のネストを持つフォルダを避けろ。パスは明確でなければなりません。 require() 起動パスに大きなアニメーションを配置する場合、特にロットティを使用して初期ブランドローディング画面または起動後ハンドオフに使用する場合、慎重に考えることが必要です。また、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__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__
悪い require() __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
メトロはファイルを見つけることができません。 __CAPGO_KEEP_0__

一部のJSONファイルは技術的には有効ですが、モバイルで期待どおりに動作しない機能を含んでいます。

__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は簡単です。"ユーザーがアイテムを好きになったときにこのセグメントを再生し、ユーザーがアイテムを好きにならなかったときに逆再生し、コンポーネントが再レンダリングされても stutterしない" というのは、混沌とした状況です。

Lottieにおけるデclarativeとimperativeアニメーション制御方法の比較表、特定の用途を強調しています。

propsを使用するには、再生が単純な場合

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

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

このスタイルは、次の用途が適しています。

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

デclarativeであり、読みやすいです。コンポーネントがマウントされ、再生が始まり、Reactが制御を握ります。アニメーションロジックがpropsによって完全に説明できる場合は、それをそのままにしておきましょう。

より高度なデclarativeケースは progressアニメーションのフレームを他の値と結びつける場所があります。動きが外部の進行源を反映する場合、動作がうまくいきますが、一時的なトリガーイベントの場合、便利ではありません。

動作の比較のための簡単な視覚的な例を確認する前に、参照を移動しましょう:

状態がアニメーションを制御する場合、参照を使用します。

ユーザーがタップ、スイッチ、またはアクションを完了したとき、参照は通常、より安全なツールです。実世界のデータによると、 68%の開発者がハイブリッドフレームワークを使用しているが、 useEffect hooksで不適切な参照ハンドリングによりアニメーションのトリガーが失敗したという報告があります。 animation.current.play() そうした問題は、ハイブリッドアプリに限ったものではありません。開発者が参照を再作成したり、モントする前に再生をトリガーしたり、不安定な効果にアニメーションを結び付けたりすると、純粋なReact Nativeでも発生します。 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__-focused これらの失敗したトリガーの議論

__CAPGO_KEEP_0__ play() 内部 useEffect 状態が変化するたびに、常に。

なぜ機能するのか:

イベントはアニメーションをトリガーする所有者です: プレスイベントは再生を開始する安定した瞬間です。
参照はローカルで持続的です: useRef 不要な再レンダリングを避ける。
コンポーネントは自動再生の競合を避ける。 マウントの動作はユーザーがトリガーした動作と戦うことはありません。

避けるべき一般的な間違い:

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

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

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

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

チームがトラブルに陥るのはここ

Where teams get into trouble

JavaScriptに直接アニメーションをバンドルし、すべてのものを早すぎるように読み込むのは、最も簡単な間違いです。 __CAPGO_KEEP_0__Lottie JSONを正しく配信するためのこのガイドによると、 JSバンドルにLottie JSONなどのアセットをオーバーロードすると、中級機器上でアプリ起動時間が40%以上増加する可能性があります。

これは、Lottie JSONをネイティブアセットに移行してオンデマンドロードすることによって、

これは、実際に多くのチームが実践していることと一致しています。
問題は、単一の小さな成功アニメーションではありません。
それらは、
オンボーディングモーション
ローダーステート

eコマースの反応

優先的に最適化するものは何ですか

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

この生産チェックリストを使用してください

JSONを圧縮して配信する 小さいファイルはロードが簡単で、起動時に膨張する可能性が低くなります。
非批判的なアニメーションをJSバンドルから移動する アプリがすぐに必要とするものに焦点を当てて、起動時に code を軽量に保つ
アニメーションをオンデマンドでロードする 画面またはアクションが必要なときにレンダリングする
古いデバイスの動作を検証する モダンシミュレータは高価な再生を隠すことができます。
起動時にデコレーションとして大きなLottieファイルを使用しないようにする __CAPGO_KEEP_0__

For teams doing serious mobile performance work, AppLighter’s guide to mobile performance is a useful companion read because it puts animation decisions in the larger context of app startup, rendering, and framework trade-offs.

One hard truth: A beautiful animation that delays first interaction is usually a product bug, not a design win.

You should also think beyond React Native in isolation. Teams working in hybrid stacks run into similar asset-loading problems, and the broader animation performance guidance for Capacitor apps maps well to Lottie decisions too.

Local files versus remote delivery

Local files are predictable. They work offline, remove network variability, and are easier to test. They’re also easy to over-bundle.

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.

実用的な分割はよく機能します:

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

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

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

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ビューを削除してください。 画面上に複数のアニメーションが表示される場合、過剰になります。

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

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

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

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

デバッグのために、ローカルビルドで繰り返し不思議な挙動が発生する場合、古いキャッシュをクリアすることが役立ちます。簡単な

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

アイコンやリアクションの固定サイズを使用
より大きなイラストのアスペクトを考慮したラッパーを使用
フル幅に伸ばすことなく、エクスポートされた組み合わせの意図を確認してから行う

多くの「Lottieが壊れた」報告はレイアウト問題、資産問題、タイミング問題などで、ライブラリはよくあなたが要求したことを実行していることが多い

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

Capgoは、CapacitorアプリにJavaScript、資産、設定の修正を送信するのをストアのレビュー待たずにチームが実行できるように支援します。 Capgo は見る価値があるでしょう。

Lottie React Native

目次

LottieはReact Nativeアプリの重要な要素です

アニメーションが製品エクスペリエンスの一部である場合にのみLottieを使用し、単にオパシティまたはトランスレートトランジションが必要な場合にのみシンプルなアニメーションを使用することです。

Lottieが最も適している場所

Lottie開発環境の設定

Choose the workflow before you install

Expo管理設定

Bare React Native設定

時間を節約するバーレスワークフロー

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

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

3 つの有用なことを実行する:

__CAPGO_KEEP_0__

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

propsを使用するには、再生が単純な場合

状態がアニメーションを制御する場合、参照を使用します。

__CAPGO_KEEP_0__-focused これらの失敗したトリガーの議論

Where teams get into trouble

優先的に最適化するものは何ですか

Local files versus remote delivery

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

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

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

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

デバッグのために、ローカルビルドで繰り返し不思議な挙動が発生する場合、古いキャッシュをクリアすることが役立ちます。簡単な