アフターエフェクト(AEF)

2019-10-18

リアクトネイティブ(React Native)プロジェクトでアドビのアフターエフェクト(Adobe After Effects)で作ったアニメーションを適用してみましょう

概要

最近アプリに躍動感を入れるためマイクロインタラクション(Microinteractions)をたくさん使っています。このブログではアドビのアフターエフェクト(Adobe After Effects)で作ったアニメーションをAirbnbが作ったlottieライブラリを使ってリアクトネイティブ(React Native)に適用する方法について説明します。

インストール

リアクトネイティブ(React Native)でlottieライブラリを使うため下のコマンドを実行してlottie-react-nativeライブラリをインストールします。

0.60 以上

npm install --save lottie-react-native lottie-ios

ライブラリ連動

インストールが完了したら、下記のコマンドを実行してiOSに必要なライブラリを連動します。

cd ios
pod install
cd ..

0.59 以下

npm install --save lottie-react-native

ライブラリ連結

リアクトネイティブ(React Native)でlottieライブラリを使うためlottie-react-nativeライブラリをインストールを完了したら下記の方法でOSに合わせてライブラリを接続します。

  • iOS

リアクトネイティブ(React Native)でlottieライブラリをiOSで使うため下記のようにlottie-react-nativeライブラリをリアクトネイティブ(React Native)プロジェクトと連結します。

react-native link lottie-ios
react-native link lottie-react-native

そしてios/[project_name].xcodeprojios/[project_name].xcworkspaceファイルを開いてxcodeを実行します。その後、下のように追加設定をしてください。

lottie ios追加設定

  1. 下のメニューでプロジェクト名を選択
  2. TARGETSでプロジェクト名を選択
  3. 上部にあるメニューでGeneralを選択
  4. スクロールして下に行くとEmbedded Binaries項目が見える。+ボタンを押してLottie.frameworkを検索、ios用を選択して追加します。

lottie ios framework追加設定

  • アンドロイド

上のようにiOSを連結したらlottieライブラリをアンドロイドで使うため他にすることはありません。下記のコマンドが実行された時、アンドロイドはlottie-react-nativeと連結されました。

react-native link lottie-react-native

使い方

リアクトネイティブ(React Native)でlottieを使うためにはアドビのアフターエフェクト(Adobe After Effects)で作ったアニメーションファイルが必要になりますアドビのアフターエフェクト(Adobe After Effects)でlottieに必要なアニメーションファイルを作る方法についてはこのブログでは説明しません。下記のリンクを参考してアドビのアフターエフェクト(Adobe After Effects)からlottieのアニメーションファイルを生成してください。

または下記のサイトで必要なマイクロインタラクション(Microinteractions)ファイルを検索してください。

アドビのアフターエフェクト(Adobe After Effects)や上のサイトからダウンロードしたファイルはjson形式になっております。

リアクトネイティブ(React Native)でlottieを利用してマイクロインタラクション(Microinteractions)を適用するため下記のようにコードを作成します。

...
import LottieView from 'lottie-react-native';
...
export default class BasicExample extends React.Component {
  render() {
    return (
      <LottieView
        source={require('./animation.json')}
        autoPlay
        loop
      />
    );
  }
}
...

アニメーションファイルへイメージがある場合

アドビのアフターエフェクト(AEF)を使ってアニメーションを作る際、アニメーションへイメージを含める場合が発生します。

イメージを含めたアニメーションをlottie用でエクスポートしたら、下記のようにイメージが含めてあるdata.jsonを確認することができます。

// data.json
{
  ...
  "assets": [
    {
      "id": "image_0",
      "w": 588,
      "h": 792,
      "u": "images/",
      "p": "main_character.png",
      "e": 0
    }
  ]
  ...

イメージを含めてるアニメーションファイルは普通のファイルと違ってイメージを追加する作業が必要になります。

  • iOS

リアクトネイティブ(React Native)プロジェクトフォルダでios/[project name].xcworkspace(またはios/xcodeproj)を選択してxcodeを実行します。

lottie ios イメージ追加

上のように左でプロジェクトを選択してResourcesフォルダを右クリくしてAdd Files to [project name]を選択します。

lottie ios イメージ追加 - ファイル選択

追加したいファイルを選択して、下にあるCopy items if neededオプションを選択して追加します。

上記のようにResourcesフォルダが見えない場合、左メニューでプロジェクト名を右クリくしてNew Group without Folderを洗濯した後、追加されたグループ名をResourcesで修正します。

lottie ios イメージ追加 - resources グループ追加

  • アンドロイド

アンドロイドはiOSより簡単です。リアクトネイティブ(React Native)プロジェクトのandroid/app/src/main/assetsへアニメーションに含めてるイメージを入れるフォルダを生成します。ここではimagesフォルダを生成しました。そしてそのフォルダにイメージをコピーします。(android/app/src/main/assets/images)

コピーが完了したら、下のようにソースコードへimageAssetsFolder={'images'}を追加します。

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
  imageAssetsFolder={'images'}
/>

Git リポジトリ

アニメーションへイメージが含まれてある場合、Lottieを使う方法についてgitリポジトリ(Repository)を作りました。下記のリンクで例題を確認することができます。

エラー対応

(0.60 / iOS) ld: warning: Could not find or use auto-linked library

0.60に下記のコマンドでiOSを実行すると

react-native run-ios

下記のようなエラーが発生しました。

ld: warning: Could not find or use auto-linked library ‘swiftCoreFoundation’
ld: warning: Could not find or use auto-linked library ‘swiftCompatibility50’
ld: warning: Could not find or use auto-linked library ‘swiftSwiftOnoneSupport’
ld: warning: Could not find or use auto-linked library ‘swiftObjectiveC’
ld: warning: Could not find or use auto-linked library ‘swiftQuartzCore’
ld: warning: Could not find or use auto-linked library ‘swiftCore’
ld: warning: Could not find or use auto-linked library ‘swiftCoreGraphics’
ld: warning: Could not find or use auto-linked library ‘swiftDispatch’
ld: warning: Could not find or use auto-linked library ‘swiftDarwin’
ld: warning: Could not find or use auto-linked library ‘swiftUIKit’
ld: warning: Could not find or use auto-linked library ‘swiftCompatibilityDynamicReplacements’
ld: warning: Could not find or use auto-linked library ‘swiftCoreImage’
ld: warning: Could not find or use auto-linked library ‘swiftFoundation’
ld: warning: Could not find or use auto-linked library ‘swiftMetal’

これを解決するため、/ios/[project name].xcworkspaceファイルを実行してXcodeを実行します。

lottie 0.60, iOS ビルドエラー対応 warning: Could not find or use auto-linked - add new file

上の画像ようにFile > New > File...を選択します。

lottie 0.60, iOS ビルドエラー対応 warning: Could not find or use auto-linked - add Swift file

上の画像ようにSwift Fileを選択して右下のNextボタンを押します。

lottie 0.60, iOS ビルドエラー対応 warning: Could not find or use auto-linked - create new file

上のように新しファイルを生成する画面が出たら、右下のCreateを押します。

lottie 0.60, iOS ビルドエラー対応 warning: Could not find or use auto-linked - Create Bridging Header

上のような画面が出たら、右下のCreate Bridging Headerを選択します。

そして下記のコマンドで実行して、以前実行したプロジェクトをiOSのシミュレータから削除します。

rm -rf ~/Library/Developer/Xcode/DerivedData/*

最後に、下記のようにProduct > Clean Build Folderを選択します。

lottie 0.60, iOS ビルドエラー対応 warning: Could not find or use auto-linked - Clean Build Folder

次は、下記のコマンドを実行してiOSを実行します。

react-native run-ios

error: Cycle in dependencies between targets

リアクトネイティブ(React Native)プロジェクトでreact-native-lottieを実装してよく使いましたが、別のライブラリを入れった後ビルドする時、下記のようなエラーが発生しました。

Build system information

error: Cycle in dependencies between targets 'LottieLibraryIOS' and 'LottieReactNative'; building could produce unreliable results.
Cycle path: LottieLibraryIOS → LottieReactNative → LottieLibraryIOS
Cycle details:
...

リアクトネイティブ(React Native)プロジェクトのPodsフォルダやnode_modulesを削除してまたインストールしても問題が続けて発生しました。

下にある説明で私のリアクトネイティブ(React Native)のプロジェクトは問題なくビルドされました。他の方も私と同じ問題が発生したら下記の方法を試してみてください。

リアクトネイティブ(React Native)プロジェクトのios/[project_name].xcworkspaceファイルを実行してxcodeを実行します。

lottie ビルドエラー対応

xcodeが実行されたら上のようにFile > Workspace Settings...を選択します。

lottie ビルドエラー対応: ビルドシステム変更

上のようにビルドシステム(Build System)をNew Build System (Default)から Legacy Build Systemに変更します。

私の場合はこのようにビルドシステム(Build System)を変更した後、リアクトネイティブ(React Native)をビルドしたら無事にビルドされることを確認しました。他の方もこの方法で解決されたらいいと思います。

アンドロイドビルドエラー

アンドロイドでビルドしたら下記のようにエラーが発生する場合があります。

Execution failed for task ':app:transformClassesWithDexBuilderForDevDebug'.

この場合、リアクトネイティブ(React Native)プロジェクトフォルダのandroid/app/build.gradleを開いて下記のように修正します。

android{
    ...
    configurations.all {
        resolutionStrategy {
            force 'com.airbnb.android:lottie:2.5.5'
        }
    }
}

完了

これでリアクトネイティブ(React Native)でlottieを使ってマイクロインタラクション(Microinteractions)を実装しました。簡単ですね?lottieでアニメーションを適用するよりアニメーションを作ることがもっと大変と思います。私はアフターエフェクト(After Effects)ができないのでhttps://lottiefiles.com/サイトを使ってます。lottieを使って皆さんも皆さんのアプリに面白いマイクロインタラクション(Microinteractions)を入れってみてください。

参考

Buy me a coffeeBuy me a coffee
Posts