アプリに躍動感を入れるためマイクロインタラクション(Microinteractions)をたくさん使っています。Native)に適用する方法について説明します。Native)でlottieライブラリを使うため下のコマンドを実行してlottie-react-nativeライブラリをインストールします。lottie-iosライブラリ連動インストールが完了したら、下記のコマンドを実行してiOSに必要なライブラリを連動します。Native)でlottieライブラリを使うためlottie-react-nativeライブラリをインストールを完了したら下記の方法でOSに合わせてライブラリを接続します。Native)プロジェクトと連結します。lottie-react-nativeそしてios/[project_name].xcodeprojかios/[project_name].xcworkspaceファイルを開いてxcodeを実行します。その後、下のように追加設定をしてください。Binaries項目が見える。+ボタンを押してLottie.frameworkを検索、ios用を選択して追加します。アンドロイド上のようにiOSを連結したらlottieライブラリをアンドロイドで使うため他にすることはありません。下記のコマンドが実行された時、アンドロイドはlottie-react-nativeと連結されました。Effects)でlottieに必要なアニメーションファイルを作る方法についてはこのブログでは説明しません。Effects)からlottieのアニメーションファイルを生成してください。https://github.com/airbnb/lottie-webまたは下記のサイトで必要なマイクロインタラクション(Microinteractions)ファイルを検索してください。Effects)や上のサイトからダウンロードしたファイルはjson形式になっております。Native)でlottieを利用してマイクロインタラクション(Microinteractions)を適用するため下記のようにコードを作成します。}}...アニメーションファイルへイメージがある場合アドビのアフターエフェクト(AEF)を使ってアニメーションを作る際、アニメーションへイメージを含める場合が発生します。イメージを含めたアニメーションをlottie用でエクスポートしたら、下記のようにイメージが含めてあるdata.jsonを確認することができます。...イメージを含めてるアニメーションファイルは普通のファイルと違ってイメージを追加する作業が必要になります。name].xcworkspace(またはios/xcodeproj)を選択してxcodeを実行します。name]を選択します。neededオプションを選択して追加します。Folderを洗濯した後、追加されたグループ名をResourcesで修正します。アンドロイドアンドロイドはiOSより簡単です。Native)プロジェクトのandroid/app/src/main/assetsへアニメーションに含めてるイメージを入れるフォルダを生成します。ここではimagesフォルダを生成しました。そのフォルダにイメージをコピーします。(android/app/src/main/assets/images)コピーが完了したら、下のようにソースコードへimageAssetsFolder={'images'}を追加します。リポジトリアニメーションへイメージが含まれてある場合、Lottieを使う方法についてgitリポジトリ(Repository)を作りました。下記のリンクで例題を確認することができます。run-ios下記のようなエラーが発生しました。name].xcworkspaceファイルを実行してXcodeを実行します。File...を選択します。Fileを選択して右下のNextボタンを押します。上のように新しファイルを生成する画面が出たら、右下のCreateを押します。Headerを選択します。下記のコマンドで実行して、以前実行したプロジェクトをiOSのシミュレータから削除します。Folderを選択します。次は、下記のコマンドを実行してiOSを実行します。Native)プロジェクトでreact-native-lottieを実装してよく使いましたが、別のライブラリを入れった後ビルドする時、下記のようなエラーが発生しました。Native)プロジェクトのPodsフォルダやnode_modulesを削除してまたインストールしても問題が続けて発生しました。Native)のプロジェクトは問題なくビルドされました。他の方も私と同じ問題が発生したら下記の方法を試してみてください。Native)プロジェクトのios/[project_name].xcworkspaceファイルを実行してxcodeを実行します。Settings...を選択します。Systemに変更します。Native)をビルドしたら無事にビルドされることを確認しました。他の方もこの方法で解決されたらいいと思います。アンドロイドビルドエラーアンドロイドでビルドしたら下記のようにエラーが発生する場合があります。Native)プロジェクトフォルダのandroid/app/build.gradleを開いて下記のように修正します。Native)でlottieを使ってマイクロインタラクション(Microinteractions)を実装しました。簡単ですね?lottieでアニメーションを適用するよりアニメーションを作ることがもっと大変と思います。Effects)ができないのでhttps://lottiefiles.com/サイトを使ってます。lottieを使って皆さんも皆さんのアプリに面白いマイクロインタラクション(Microinteractions)を入れってみてください。