React NativeでLottieを使ってアニメーション実装

React Nativeで作成したアプリにLottieでアニメーションを実装する手順の紹介です。

Lottieはairbnbが開発したアニメーションライブラリーで、Web上で利用できる他にReact Nativeでも実装が可能です。大きな特徴としては、AdobeのAfter Effectsを使って作成したアニメーションをLottie用にエクスポートして実装します。 Lottie用にエクスポートされたデータはJsonファイルとなっており、容量の削減などが期待できます。

各OSのネイティブで実装できる他に、Webでの実装やReact Nativeでの実装が用意されています。マルチプラットフォームで利用できることも大きな特徴と言えるでしょう。

概要

ドキュメント
After Effectsの設定
インストール
実装
上手くいかなかったポイント

ドキュメント

https://airbnb.io/lottie/#/README
概要です。After EffectsでインストールするBody movinのことなども説明されています。

https://airbnb.io/lottie/#/react-native
こちらはReact Nativeすなわちアプリ側での実装方法です。

After Effectsの設定

まずはAdobe After Effects側の設定からです。「Bodymovin」というライブラリをインストールする必要が有ります。基本的に以下のドキュメントに従って進めれば問題ないです。

https://github.com/airbnb/lottie-web

プラグインをインストールして、必要な設定を変更します。

Go to Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
[編集]> [設定]> [スクリプトと式...]に移動し、[スクリプトによるファイルの書き込みとネットワークへのアクセスを許可する]をオンにします

設定がおわったらアニメーションを作成しましょう。先程インストールした「Bodymovin」は完成したアニメーションをjsonで書き出すときに使用します。

ウインドウ > 拡張機能 > Bodymovin と選択してライブラリを起動します。書き出すアニメーションを選択して出力先のディレクトリやファイル名を入力したら、チェックをつけてRenderをクリックするとjsonファイルが出力されます。

インストール

いつもどおりです。npmやyarnでインストールします。

npm install --save lottie-react-native

その後 react-native linkを実行しましょう。jsのみではなくネイティブのコードも含まれているライブラリであるため、react-native linkを行う必要が有ります。

react-native link lottie-react-native

実装

LottieViewコンポーネントをインポートして、アニメーションjsonファイルを渡して書き出せば良いです。コンポーネント自体に高さと幅を定義しておかないと要素自体が表示されませんでした。気をつけましょう。

import LottieView from "lottie-react-native";
~~~

<View style={styles.animationContainer}>
    <LottieView
        ref={animation => {
            this.animation = animation;
        }}
        style={{
            width: 200,
            height: 200,
        }}
        source={require('./assets/anime.json')}
    />
</View>
~~~

refでanimationを格納しています。アニメーションの開始や停止、再動作などを操作する場合はこのようにしてrefに格納しておきましょう。以下のようにanimationに用意されたメソッドで挙動を制御できます。

this.animation.reset();
this.animation.play();

上手くいかなかったポイント

未対応のエフェクトがある

After Effectsのすべての機能やエフェクトに対応しているわけではないらしく、思ったように動作しない・表示されない現象に出会いました。以下のリンク先で対応しているエフェクトの種類が把握できますので、対応しているものを使ってアニメーションをつくるようにしましょう。

https://airbnb.io/lottie/#/supported-features

アニメーション作成の前には必ずチェックするようにします。

アニメーションの動作チェック

上記の未対応のエフェクトなどもあるので、アニメーションが動かないときは原因の切り分けをしっかりやりましょう。

方法としては、Web版のprevierで動作を確認、その後、端末のLottieクライアントアプリでも確認。そしてアプリで実装して確認、というフローが用意できます。

Web版プレビュー
https://lottiefiles.com/preview
会員登録が必要です。出力したjsonファイルをアップロードして動作の確認ができます。
Lottieクライアントアプリ
各OSのストアからインストールできます。
上記のWeb版プレビューを行うとQRコードが取得できます。それをクライアントアプリで読み込めば、アニメーションの動作チェックを行えます。

ここまで正常に動作していれば、実際のアプリでも動作するはずです。アプリで対応していないエフェクトであれば、クライアントアプリで動作確認した際に、動かない・表示されない・エラーで停止するといった現象が発生します。