Lottie は、Airbnb が開発した iOS、Android、React Native 向けのオープンソース アニメーション ライブラリです。Adobe After Effects からエクスポートされたアニメーションを読み込み、ネイティブ アプリでこれらのアニメーションを静的マテリアルのように使用できるため、クールなアニメーション効果を完璧に実現できます。 糸を追加 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項
個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...
目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...
序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...
今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...
1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
プロフィールとは何ですか?特定の SQL のパフォーマンスを分析したい場合に使用できます。プロファイ...
1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...
テスターとして、学習プロセス中に Linux でソフトウェアをインストールする必要が頻繁にある場合が...
いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...
注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...
この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...
1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...
開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...