React Native でアニメーションを実現するなら lottie-react-native で決まり

Lottie の紹介、React Native へのインストールの方法、サンプルアニメーションの動かし方

Yuji Tsuburaya
Oct 18, 2018 · 7 min read
Illustration by unDraw

React Native でアニメーションを実現するにはどうしたら良いか迷ったことはありませんか?アプリだと、Web のように keyframes を使って柔軟に CSS アニメーションをさせることはできません。

そこで登場するのが Lottie です。LottieAirbnb 製のアニメーションライブラリで、Lottie を使うことで、以下のようなアニメーションを簡単に実現することができます。

http://airbnb.io/lottie/

Lottie は、After Effects で作成したアニメーションを、Bodymovin というオープンソースの拡張機能を使って json 形式にエクスポートされたアニメーションデータを使用します。

アニメーションが json 形式なので、クロスプラットフォームで動かしやすい、ファイルサイズが大きくなりにくい、ネットワーク経由でも読み込みが可能になる、キャッシュを効かせやすい、など、さまざまなメリットがあります。

この記事では Lottie を React Native に組み込むことができる lottie-react-native の簡単な使い方からサンプルコードまでを掲載したいと思います。


公式ドキュメントの手順に沿って導入すればOKです。ライブラリは以下のコマンドで npm 経由でインストールすることができます。

npm i --save lottie-react-native

インストールが完了したら

react-native link

を実行します。その後、

react-native run-ios

でアプリを再起動します。僕の環境ではここでビルドに失敗しました。以下のエラーが出ました。

'Lottie/Lottie.h' file not found
#import <Lottie/Lottie.h>

ここの手順は公式ドキュメントには載ってなかったので、手動で作業を行いました。/ios/[PROJECT_NAME].xcodeproj から Xcode でプロジェクトを開き、以下の画像のように、 node_modules 内の Lottie.xcodeproj を Xcode のプロジェクト内のライブラリに手動で追加します。

ドラッグアンドドロップで移動

その後、 General > Embedded Binaries の + ボタンから、以下の画像のようにLottie.framework を追加してください。

Embedded Binaries に追加

この状態でアプリを再起動してみてください。僕はこの方法で再起動したらビルドエラーはなくなりました。もしこれでも治らない場合は、 Issue が立ち上がっていたので、こちらを参考にしてみても良いかもしれません。


事前準備が整ったので、実装の説明に移ります。今回は、以下のようなアニメーションを導入してみたいと思います。

アニメーション用の jsonファイルを準備します。今回は LottieFiles からサンプルを使用させていただきました。

loading で検索をかけて出てきたこちら を使用したいと思います。

Download のリンクを押すと、アニメーション用のファイルをダウンロードすることができます。中を見ると、アニメーションの実体が jsonファイルであることが確認できると思います。


これで全ての事前準備が整ったのでアプリに組み込んでいきたいと思います。サンプルコードは以下に記載しました。

簡単なコードの解説。

import LottieView from 'lottie-react-native';
import loading from '../assets/lottie/loading.json';

インストールしたライブラリと、ダウンロードした jsonファイル(今回は loading.jsonという名前) をそれぞれインポートします。パスは適宜書き換えてください。

<LottieView
// 中略
ref={(refs) => {
this.loadingAnimation = refs;
}}
source={loading}
/>

LottieView コンポーネントを呼び出します。アニメーション発火のタイミングで使用するので、 ref で参照を付けておきます。

componentDidMount() {
if (this.loadingAnimation) this.loadingAnimation.play();
}

任意のタイミングでアニメーションを発火させます。今回は componentDidMount のタイミングでアニメーションを発火させています。このコードだけで、以下のアニメーションを作ることができます。

レンダリング時にアニメーションを発火させる

今回は play() という静的メソッドを利用してアニメーションを実行しましたが、アニメーションの再生時間を柔軟にコントロールしたい場合は、自分で Animatedインスタンスを生成して再生時間をコントロールすることもできます。が、基本的なアニメーションに関しては play() で十分でしょう。

自動再生やループの有無なども、 LottieViewProps で指定してやることでコントロールすることができます。詳しくは 公式のドキュメント を見てみるのが良いと思います。


lottie を使うと簡単にアニメーションをアプリに組み込むことができてとても便利。

もし分からないところがあれば、ツイッター( @___35d )にリプライ飛ばしていただければ反応できると思います。

あなたのアプリにも Lottie アニメーションを導入してみてはいかがでしょうか。


___35d

日報

Yuji Tsuburaya

Written by

株式会社ビズリーチのフロントエンドエンジニア。個人開発もやってます。

___35d

___35d

日報

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade