Lottieとは

Airbnbが開発した、iOS, AndroidそしてReac tNativeに対応したアニメーションライブラリです。

アニメーションファイルはAdobe After Effectsで作成し、
それをJSON形式で書き出したものを、アプリで読み込み再生することができます。

アニメーション作成と、アプリ実装の作業が完全に分離できるので、
デザイナーはアニメーションの作成に集中でき、
またエンジニアはそれを手間なく組み込むことができます。

またAfter Effectsなんか使えねーよ！って場合は、LottieFiles (https://www.lottiefiles.com)という便利なサイトがあります。
Lottie用のアニメーション素材が多数公開されています。

f:id:wasan:20180405220500g:plain

そのまま使えそうなものも多くあるので、まずはここで探してみてもよさそうです。

React Nativeに組み込む

さて、いざ実装してみます。
今回はExpoを利用します。

まずはcreate-react-native-appでプロジェクトを作成して下さい。

続いてアニメーションのJSONファイルを入手します。
LottieFiles (https://www.lottiefiles.com)から適当なものを落としてこればよいでしょう。

それを適当なフォルダに格納します。（この例ではfav.json）
f:id:wasan:20180405224105p:plain

そしてコーディングです。
まずLottieのライブラリをimportします。
まだα版のためDangerZoneというネームスペースに入ってるようです。
なんか名前がちょっと怖いですね...

import { DangerZone } from 'expo';
let { Lottie } = DangerZone;

そして表示したい箇所に以下のようなJSXタグを挿入します。

        <Lottie
          ref={animation => {
            this.animation = animation;
          }}
          style={{
            width: 100,
            height: 100
          }}
          source={require("./animations/fav.json")}
        />

source={require("./animations/fav.json")}は先ほど格納したアニメーションファイルへの相対パスになります。

最後にplay()メソッドを実行します。

  componentDidMount() {
    this.animation.play();
  }

全体としてはこんな感じになります。

import React from "react";
import { StyleSheet, View } from "react-native";
import { DangerZone } from "expo";
const { Lottie } = DangerZone;

export default class App extends React.Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <View style={styles.container}>
        <Lottie
          ref={animation => {
            this.animation = animation;
          }}
          style={{
            width: 100,
            height: 100
          }}
          source={require("./animations/fav.json")}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    flex: 1
  }
});