ReactNative + Lottie + Haiku 　あなたのアプリに、アニメーションを実装しよう！

React Native で、UI, UX改善のため、マイクロインタラクションを実装したい！　

ただし、Affter Effect 使ったことない！　

でも、　　[Lottie](http://airbnb.io/lottie/)　　っていう素敵なサイトから、簡単にアニメーションを取り入れることができるらしい！　


　

ただ、公式通りに手順を進めても、全然アニメーション実装できねえぞ、こら！！！　

って方のために、お役に立てる記事です。　


　


こちらの記事が参考になりました。　
有難うございます。　


[React Native でアニメーションを実現するなら lottie-react-native で決まり](https://medium.com/35d/react-native-%E3%81%A7%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%AA%E3%82%89-lottie-react-native-%E3%81%A7%E6%B1%BA%E3%81%BE%E3%82%8A-340487a5d5c5) 


では、やっていきましょう〜　

　


#1. sketchで画像を作る

では、適当に矢印の画像を作りましょう。ここで注意、作り終わったら、必ずCommand + S でsaveしましょう。　 


<img width="1433" alt="スクリーンショット 2018-11-28 6.34.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/5caeb1d2-c67d-06f2-dfa6-7fbc4802065d.png">


#2. Haikuをdownload 

これが、超絶おすすめです。無料だなんて・・・！
理由としては、　
1. sketch と互換している
2. animation をjson ファイルとして吐き出しているので、容量を食わない
3. 操作が簡単
4. react native に対応している　
5. 名前がいい。日本人の心をくすぐる。

では、早速やってみましょう。　

[Haikuのダウンロードはこちらから](https://www.haiku.ai/)


#3. Haikuにsketch のファイルをインポートする　

こちらの記事が参考になりました。　

[Motion design for the web, iOS & Android with Haiku](https://medium.com/haiku-blog/getting-started-with-animations-for-the-web-ios-android-with-haiku-568184eb31fa) 


簡単に手順を述べます。

1:  + ボタンをクリックし、新しいProjectを始める。
2:  LIBRARY の横の＋ボタンをおして、Import new file をクリックし、作成したsketchを読み込む
3:  Haikuの下の画面で、適当なアニメーションをつける。

<img width="1404" alt="スクリーンショット 2018-11-28 6.43.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/d748e7d5-b371-3f64-8177-717031b6bf37.png">
　

ここからが本番です。　

4:   右上のPUBLISH をおす。
5:   REACT NATIVE をクリック　
6:   Download JSON し、できたJSONファイルを自分のテキストエディタに取り込む


<img width="188" alt="スクリーンショット 2018-11-28 6.47.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/fa65e8d1-fe73-3fcf-9122-3afbb4e9729c.png">
　

arrow.json という形で取り込みました。　
では、Reactnative でLottie ファイルを使えるようにしましょう。　
(すでに、react native init 〇〇　→　reactnative run-ios してプロジェクトを作ってあるものとします。)
 

``` terminal
npm i --save lottie-react-native
```

```
react-native link
```

ここで、アプリを再起動すると　

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

というビルドエラーが発生します。
あわてず、XCODEを修正します。　
　

[
こちらの記事通りに、　
](https://medium.com/35d/react-native-%E3%81%A7%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%AA%E3%82%89-lottie-react-native-%E3%81%A7%E6%B1%BA%E3%81%BE%E3%82%8A-340487a5d5c5) 



7:   /ios/ProjectName.Xcodeproj からXCODEを立ち上げます。

node_modules 内の Lottie.xcodeproj を Xcode のプロジェクト内のLibraries の中に、
ドロッグアンドドロップします。


<img width="249" alt="スクリーンショット 2018-11-28 6.57.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/e6729b6a-bfcd-b56e-6cd2-7a33e3520478.png">

(Libraries の直下に、Lottie.xcodeproj が挿入されました。)
　


8:  General > Embedded Binaries の + ボタンから、Lottie.framework iOS を追加します

<img width="1358" alt="スクリーンショット 2018-11-28 7.01.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/141779aa-d979-13b4-8433-edd054567d10.png">

 
9:  これで、iOS シュミレーターを再起動し、下記のようにコードを打ちましょう

```AnimateScreen.js
import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    return (
      <LottieView
        source={require('./arrow.json')}
        autoPlay
        loop
      />
    );
  }
}

```

```App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import LottieView from 'lottie-react-native';
import Anime from './AnimateScreen';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
       
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Anime />
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

```

これで動くはずです！　








![ezgif.com-optimize.gif](https://qiita-image-store.s3.amazonaws.com/0/232715/243edd72-7651-6904-4239-1045969f8008.gif)







Lottie + Haiku で簡単に自作アニメーションを取り入れることができましたね！　


Happy  ReactNative ライフを~