React NativeプロジェクトでLottieアニメーションを使用する方法

React NativeプロジェクトでLottieアニメーションを使用する方法

Lottie は、Airbnb が開発した iOS、Android、React Native 向けのオープンソース アニメーション ライブラリです。Adobe After Effects からエクスポートされたアニメーションを読み込み、ネイティブ アプリでこれらのアニメーションを静的マテリアルのように使用できるため、クールなアニメーション効果を完璧に実現できます。
使用プロセスとしては、まずLottieアニメーションでAdobe After Effectsを使用してオリジナルのアニメーションを作成し、次に公式のBodymovinプラグインを使用してアニメーションをJsonファイルにエクスポートする必要があります。このJsonファイルは、Lottieが解析する必要があるアニメーションソースファイルです。
React Native プロジェクトで Lottie アニメーションを使用するには、以下に示すように、まず lottie-react-native および lottie-ios プラグインをインストールする必要があります。

糸を追加 lottie-react-native
糸追加 [email protected]

インストールが完了したら、 react-native link コマンドを使用してネイティブ ライブラリの依存関係をリンクできます。もちろん、これに加えて、手動の方法を使用して依存関係を追加することもできます。 CocoaPods を使用する iOS プロジェクトの場合は、次のスクリプト ファイルを追加する必要があります。

ポッド 'lottie-ios'、:path => '../node_modules/lottie-ios'
ポッド 'lottie-react-native'、:path => '../node_modules/lottie-react-native'

次に、pod install コマンドを実行してプラグインをインストールします。ネイティブ Android の場合は、まず android/settings.gradle ファイルに次のコンテンツを追加する必要があります。

':lottie-react-native' を含める
project(':lottie-react-native').projectDir = 新しいファイル(rootProject.projectDir, '../node_modules/lottie-react-

次に、app/build.gradle ファイルを開き、次の依存関係を追加します。

 依存関係 {
  ...
  実装プロジェクト(':lottie-react-native')
  ...
}

最後に、以下に示すように、ReactApplication の getPackages() メソッドに LottiePackage を追加する必要があります。

com.airbnb.android.react.lottie.LottiePackage をインポートします。
    
@オーバーライド
    保護されたリスト<ReactPackage> getPackages() {
      Arrays.<ReactPackage>asList( を返します。
          ... //他のコードは省略 new LottiePackage()
      );
    }
  };

この時点で、Lottie に必要なネイティブ開発環境がセットアップされました。次に、以下に示すように、Lottie が提供する LottieView コンポーネントを使用して、以前にエクスポートした Json ファイルを読み込むだけです。

関数LottieAnimPage(){
    戻る (
      <LottieView source={require('../animations/LottieLogo1.json')} 自動再生ループ />
    )
}

デフォルトの LottieAnimPage をエクスポートします。

同時に、LottieView コンポーネントは、アニメーションに追加の効果を加えるための進行状況パラメータも提供します。たとえば、以下は、progress を使用して同様の効果を実現するサンプル コードです。

関数LottieAnimPage(){

    定数 anim = useRef(新しい Animated.Value(0)).current;

    関数 linearAnim() {
        アニメーション.タイミング(anim, {
            値: 1,
            期間: 5000、
            イージング: Easing.linear、
        })。始める();
    }

    React.useEffect(() => {
        線形アニメーション();
    }, []);

    戻る (
        <LottieView ソース = {require('../animations/TwitterHeart.json')}
                    進行状況 = {アニメーション} />
    )
}

ロッティーアニメーション効果を実現するための核心は、やはりロッティー独自のアニメーションをいかに作るかということにあることがわかります。まず、Adobe After Effects をインストールして、それを使用して Lottie オリジナル アニメーションを作成し、次に Bodymovin プラグインをインストールし、最後に Lottie オリジナル アニメーションをアニメーション化された Json ファイルとしてエクスポートする必要があります。 Adobe After Effects がインストールされていない場合は、図 3-7 に示すように、Adobe の公式 Web サイトからダウンロードしてインストールできます。

After Effects を終了し、最新の ZXP インストーラーをダウンロードしてインストールします。インストールが完了したら、最新の Bodymovin プラグインをダウンロードします。 ZXP インストーラーを開き、図 3-8 に示すように、Bodymovin プラグインを ZXP インストーラー ウィンドウにドラッグしてインストールします。

次に、After Effectsを開き、[ウィンドウ]→[拡張機能]をクリックして、Bodymovinプラグインを表示します。もちろん、Lottie の公式サイトでも多くのクールなアニメーションが提供されており、図 3-9 に示すように、これらのアニメーションの Json ファイルを直接ダウンロードして使用することもできます。

React Native に Lottie アニメーションを実装する記事はこれで終わりです。React Native Lottie アニメーションに関するより詳しい内容は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React NativeのScrollViewプルダウンリフレッシュ効果
  • React NativeのstartReactApplicationメソッドの簡単な分析
  • React Nativeの起動プロセスの詳細分析
  • React Nativeのカスタムルーティング管理に関する深い理解

<<:  Docker CPU 制限の実装

>>:  Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

推薦する

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

echartsマップカルーセルハイライトを解決するための記事

目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

MySQL のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

CentOS 8が利用可能になりました

CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...

jQueryはHTML要素の非表示と表示を実装します

商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...

docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

MySQL 5.7.33 インストール プロセスの詳細な図解

目次インストールパッケージのダウンロードインストール環境変数の設定インストールが成功したか確認する記...

MySQL SHOW STATUSステートメントの使用

MySQL のパフォーマンス調整とサービス ステータスの監視を行うには、MySQL の現在の実行状態...

Discuz! フォーラムに設定オプションを追加する方法

Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...