Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

でも、  Lottie  っていう素敵なサイトから、簡単にアニメーションを取り入れることができるらしい! 

 

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

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

 

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

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

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

 

1. sketchで画像を作る

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

スクリーンショット 2018-11-28 6.34.28.png

2. Haikuをdownload

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

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

Haikuのダウンロードはこちらから

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

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

Motion design for the web, iOS & Android with Haiku

簡単に手順を述べます。

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

スクリーンショット 2018-11-28 6.43.10.png
 

ここからが本番です。 

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

スクリーンショット 2018-11-28 6.47.35.png
 

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

npm i --save lottie-react-native
react-native link

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

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

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


こちらの記事通りに、 

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

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

スクリーンショット 2018-11-28 6.57.16.png

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

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

スクリーンショット 2018-11-28 7.01.40.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

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

Happy ReactNative ライフを~

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away