Lottie React Native

あなたはどちらの立場にいるか分かれます。デザイナーがあなたにLottie JSONを渡して「今日中にアプリに組み込むことができるか？」と尋ねている場合、または既にアニメーションを組み込んで開発環境では動作するが、実機、起動時間、リリースビルドが含まれるとコストが高く感じるようになった場合です。

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

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

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

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

Lottieはそのワークフローを変えた。Airbnbは2016年にLottieをオープンソース化し、それによりモバイルアニメーションを変えた。デザイナーは直接アニメーションを送り込むのではなく、エンジニアがフレームごとに再構築するのを強制するのではなく、Bodymovinを使用してAfter Effectsで作業し、開発者はネイティブバックアップされた再生で出力をレンダリングするのではなく、動きをカスタム__CAPGO_KEEP_0__に翻訳するのではなく。 40%Airbnbの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.

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

実用的なルール: Lottieを使用するのは、アニメーションが製品の体験の一部である場合に限ります。ただし、単純な不透明度または変換トランジションのみが必要な場合は、Lottieを使用しないでください。

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

Lottieの適切な場所

Lottie React Nativeは、次のようなもので最もよく機能します。

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

ただし、すべてのアニメーション問題を解決するものではない。基本的な画面のトランジションの場合、React Nativeの独自のアニメーションツールがしばしばシンプルです。非常に大規模または高度にインタラクティブな動きのシステムの場合、JSON形式は勝ちになるのではなく、トレードオフになることがあります。このトレードオフは、生産環境に到達するとより重要になります。生産環境に到達するのは、ほとんどのチュートリアルが早すぎるためです。

ロッティ開発環境の設定

インストールのパスは、最初に次の決定によって決まります: エクスポ管理されたワークフローまたはバーレイクトナティブ. メンタルモデルを混ぜないでください。開発者がエクスポ内でバーレイクトナティブのワークフローをフォローしたり、エクスポがすべてのネイティブの詳細を抽象化していると仮定したりすると、セットアップ問題が発生することがよくあります。

エクスポとバーレイクトナティブのプロジェクトでロッティアニメーションのセットアップ手順を示すフローチャート。

ワークフローを選択する前に

エクスポでアプリが動作し、最速のセットアップを求めている場合は、カスタムネイティブワークが必要な場合は除き、エクスポのパスに留まることをお勧めします。バーレイクトナティブのアプリで動作している場合、または既存のネイティブモジュールに直接コントロールが必要な場合は、通常のネイティブ依存関係としてインストールし、iOSおよびAndroidのビルドを即座に検証することをお勧めします。

多くのチームは、プロジェクトのタイプに合わせてセットアップを整理することで、デバッグがどれだけ簡単になるかを過小評価しています。また、カスタムネイティブ統合を構築するチームも、待つのではなく、早期にExpo開発クライアントワークフローに移行することが多いです。 Expo開発クライアントワークフロー Expo管理セットアップ

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

パッケージをインストール

Metroを再起動
```
npx expo install lottie-react-native
```
デバイスまたはシミュレータで検証
```
npx expo start -c
```
ローカルJSONファイルから始めて、非常に小さなアニメーションをレンダリングしてみましょう。大きなアセットと新しいインストールを同時にデバッグしないでください。 Expoに関しては、いくつかの実用的な注意点があります。

ローカルファイルを優先してください:

リモートアニメーションデバッグは、ライブラリが正常に動作していることを証明しようとしている場合にのみ、ネットワークノイズを追加します。 Expoの場合、セットアップを最小限に抑えることが重要です。
テストリリースの動作を早期に確認する: 開発モードでは、タイミングやパフォーマンスに関連する問題が隠れることがあります。
アセットのパスを確認する: JSONファイルが置き付けられていないことが、最も一般的な「何も表示されない」原因の1つです。

Expoは「動作する」という最速のルートではありますが、「拡大する」という最速のルートではありません。

Bare React Native設定

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

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

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

npx react-native run-ios

または

npx react-native run-android

インストールした後、ネイティブ依存関係が正しくコンパイルされていない場合、ホットリロードではアプリケーションを救うことはできません。

時間を節約するための基本的なワークフロー

この短いチェックリストを使用して進む前に

チェック	なぜ重要か
インストール後に再構築する	ネイティブモジュールは最新のコンパイルが必要
実行 `pod install`	コンテキスト: HTMLテキストのフラグメント (親キー `compare_codepush_step2_text`)。ページ/エリア: Capgo マーケティングウェブサイト。役割: 長いマーケティングまたは法的文章。表示される場所: page alternatives/codepush.astro。Capgo の製品/ブランド名と開発者用語を完全に保持する。
インストール後に再構築する	インストール後に再構築する
インストール後に再構築する	Android と iOS は異なる理由で失敗することがあります。

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

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

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

モダンな開発者向けワークスペースです。ノートパソコンはcodeを表示し、モニターにはモバイル用アニメーションアプリが表示されています。

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

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

assets/
  animations/
    success.json

名前は単純にしろ。スペース、奇妙な記号、多層の階層を持つフォルダを避けろ。パスが明確になるようにしたい。 require() 最初のブランドローディングスクリーンまたは起動後のハンドオフ用にLottieを使用している場合、起動パスに大きなアニメーションを配置する前に、慎重に考えろ。特に、React Nativeのスプラッシュスクリーン動作を調整している場合に限ります。

LottieViewでレンダリング React Native splash screen の動作.

__CAPGO_KEEP_0__

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,
  },
});

３つの便利な機能があります：

ライブラリが正しくレンダリングされることを証明します
アセットパスが正しく解決されることを証明します
後で再生とサイズを調整するための１つの孤立された場所を提供します

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

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

ローカルで決定的な初回レンダリングを維持する。あなたは統合テストを行っているのではなく、構造をテストしているのである。

より良い初期画面テスト

コンポーネントをシンプルな画面に配置し、背景を中立的な色にします:

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のシミュレータで両方で動作する場合、最初の実際のハードルをクリアしたことになります。そこから、次のステップはアニメーションを追加することではなく、宣言的プロパティをマスターし、参照を直接制御するときに使用するときを学ぶことです。

ロッティアニメーションコントロールのマスター

ロッティの多くのReact Nativeのバグは、アニメーションが状態に反応する必要があるときに発生する。自動再生は簡単です。「ユーザーがアイテムを好きになったときにこのセグメントを再生し、ユーザーがアイテムを好きにならなかったときに逆再生し、コンポーネントが再レンダリングされたときにストッターしない」は、混乱が生じる場所です。

宣言的と命令的なアニメーション制御方法の比較チャート。それぞれの用途を強調する。

プロップを使用するのは、再生が単純な場合

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

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

このスタイルは、以下の用途に適しています:

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

それは宣言的で読みやすいです。コンポーネントがマウントされ、再生が始まり、Reactが管理を続けます。アニメーションのロジックがすべてのプロパティで説明できる場合、それをそこに残しておきましょう。

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

ここでは、リファレンスを使用する前に、比較の視覚的な例を紹介します。

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

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

その問題はハイブリッドアプリに限ったものではない。 React Nativeの純粋なバージョンでも、開発者が参照を再作成したり、モントする前に再生をトリガーしたり、不安定な効果にアニメーション呼び出しを結び付けたりすると、特にそのようなシナリオで発生する。

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>
  );
}

信頼できるlikedとunlikedのパターン

このパターンは、stateが変更されるたびに呼び出す必要がある場合よりも、実行中のプロダクションで効果的に機能する。 play() なぜなら useEffect イベントはアニメーションをトリガーする:

プレスイベントは再生を開始する安定した時点である。

参照はローカルで持続的: 不要な再レンダリングを回避する。
コンポーネントは自動再生の競合を避ける: useRef ユーザーがトリガーした動作とモントの動作が相互に影響しないようにする。
なぜそのようなパターンが効果的か このパターンは、stateが変更されるたびに呼び出す必要がある場合よりも、実行中のプロダクションで効果的に機能する。

よくある間違いを避けること:

参照先が存在する前にトリガーする
もし animationRef.current nullの場合、再生は起きません。ガードする
使用 autoPlay 命令型コントロール
再生のデフォルトのオーナーを1つ選ぶ
すべてを動かす useEffect
効果は便利ですが、UIアクションの場合、タイミングの問題を追加するのではなく、解決するのではなく問題を引き起こします。

アニメーションがタップに反応する場合、タップハンドラー内でトリガーする。ソースの真実がそのインタラクションの外側に住んでいる場合にのみ useEffect パフォーマンスチューニングのための生産アプリ

パフォーマンスチューニング

Lottie React Nativeは、チームが大きなJSONファイルをアプリバンドルに詰め込むまで、軽量なように見えるライブラリの1つです。アプリ起動が遅くなった原因は、JSONファイルのサイズが大きくなったことではなく、配信戦略の問題です。

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

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

最も簡単な間違いは、すべてのアニメーションを直接JavaScriptにバンドルし、すべてのアセットを早すぎてロードすることです。この Lottie JSONを誤って配信するためのこのガイドによると、Lottie JSONなどのアセットをJSバンドルにオーバーロードすると、 中級機器ではアプリ起動時間が40%以上長くなる可能性があります。実際に多くのチームが経験しているように、問題は単に小さな成功アニメーションではなく、積み重ねられた問題です。

オンボーディングモーション

ローダーステート
ECOMMERCEリアクション
チームがトラブルに陥る場所はここです。
ブランドの空白画面
ロケールファイルや他のバンドル重いアセット

あなたのアプリがすでに起動に予算の問題がある場合、Lottieファイルはすぐに悪化させることができます。

優先して最適化するもの

エクスポート自体から始めましょう。設計者のエクスポートが粗悪な場合、後でパーシング、メモリ、レンダリングの安定性でコストがかかります。設計者のエクスポートを受け入れるのを避けましょう。

使用するプロダクションチェックリスト

JSONを圧縮して配信する 小さいファイルは読み込みが簡単で、起動時に膨れやすいことはありません。
非批判的なアニメーションをJSバンドルから移動する Keep launch code focused on what the app needs immediately.
アニメーションをオンデマンドで読み込む 画面やアクションが必要なときにレンダリングする
古いデバイスの挙動を検証する: モダンなシミュレータは高価な再生を隠すことができます。
大きなLottieファイルを起動時装飾として使用しないようにする: 最初のインタラクションに重要でない場合は、起動時間とレンダリング、フレームワークのトレードオフのより広いコンテキストでアニメーション決定を導くアプリスタートガイドを参照する必要があります。

モバイルパフォーマンスの重視を行っているチームの場合、 AppLighterのモバイルパフォーマンスガイドは、モバイルアプリのパフォーマンスを向上させるためのアプローチを理解するのに役立ちます。

真実の一つ: 遅延した最初のインタラクションで美しいアニメーションは、通常、デザインの勝利ではなく、製品のバグです。

React Nativeを孤立して考えるのではなく、チームはハイブリッドスタックで作業する必要があります。アニメーションパフォーマンスのガイドラインは、Capacitor アプリのパフォーマンス向上に役立ちます。 __CAPGO_KEEP_0__ アプリのアニメーションパフォーマンスガイダンス

ローカルファイルとリモート配信

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

リモート配信ではバイナリサイズが小さくなりますが、アニメーションの可用性、キャッシュ、フォールバックに関する懸念が生じます。非重要な動きの場合、このトレードオフは受け入れ可能ですが、購入確認や認証成功などの主なUX状態ではリスクが高まります。

実用的な分割は次のようになります:

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

このセクションから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 ビューを削除してください:

1 つの画面に複数のアニメーションを表示すると、過剰になります。

リファレンスが null またはプレイが何もしない場合:

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

リファレンスが null である場合、トリガーが mount する前に発火したり、コンポーネントが条件付きで削除されたりすることがあります。 useRefリファレンスを安定させてください、そしてアニメーションコンポーネントを不要に再作成しないようにしてください。ローカルビルドで繰り返し不思議な不具合をデバッグしている場合、古いキャッシュをクリアすることで助けられます。簡単な Yarn キャッシュクリーンアップルーチン開発中のアセットの誤解を招く行為を削除するのに、時々これだけが必要です。

アニメーションは画面サイズに関係なく間違っている

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

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

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

最終的なデバッグのショートカットが必要なら、すべての高度なプロパティを削除し、1つのローカルアニメーションを中央のビュー内でレンダリングし、そこから再構築してください。そうすることで、問題をより速く特定できます。

Capgoは、CapacitorアプリにJavaScript、資産、設定の修正を送信するためにチームに安全な方法を提供します。ストアのレビューを待つことなく、ハイブリッドアプリを管理する場合、安全なアップデートを送信し、ステージドロールアウトを取り扱い、フロントエンドの問題から迅速に回復する必要がある場合、Capgoはご覧になりたいものです。 Capgo CapgoのPRを送信することの価値はあります。