- アニメーションを使ってみたい
- react-native-animatableライブラリの使い方がわからない
と言う方向けの記事となっています。
本記事を読むことで、このような動作を実装することができるようになります。
1. 概要
私がReactNativeでアプリ開発をしていてアニメーションを実装する時は、react-native-animatableライブラリを使っています。
今回は、そのreact-native-animatableライブラリを使ったアニメーションの実装方法について紹介していきます。
本記事では、ボタンやアイコンを使って解説しています。ボタンの作り方、アイコンの実装方法については、以前の記事を確認してください。
本記事の内容 アイコンを使ってみたい アイコンの表示のさせ方が分からない という方向けの記事となっています。 この記事を読むことで、このようにアイコンを表示できるようになります。 1. 概要 本記事で紹介するreact- …
本記事の内容 buttonコンポーネントを使わずにボタンを作りたい人 ボタンのカスタマイズができずに困っている人 という疑問、悩みをお持ちの方向けの記事になっています。 本記事では、以下のようなボタンを作っていきます。 …
2. react-native-animatableライブラリの実装
2.1 ライブラリのインストール
まず、ターミナルで以下のコマンドを実行してライブラリをインストールします。
|
1 |
npm install --save react-native-animatable |
3. 使い方
今回は、以下の3つについて例を挙げながら解説していきます。
- 1. 基本的な使い方
- 2. refを使ったアニメーションの発火方法
- 3. 自作アニメーションの作成方法
3.1 基本的な使い方
実装
サンプルコード|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React from 'react'; import { StyleSheet, View } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import * as Animatable from 'react-native-animatable'; export default class App extends React.Component { render() { return ( <View style={{flex: 1}}> <View style={styles.content}> <Animatable.Text animation="shake" duration={2000} iterationCount="infinite" style={{fontSize: 40}}> shake </Animatable.Text> </View> <Animatable.View animation="bounce" duration={4000} iterationCount="infinite" style={styles.content}> <Icon name="twitter" size={100} color='hsla(210, 100%, 55%, 0.7)' /> </Animatable.View> </View> ); } } const styles = StyleSheet.create({ content: { flex: 1, alignSelf: "center", justifyContent: "center", }, }) |
サンプルコードについて解説
react-native-animatableライブラリでは、 View, Text, Imageコンポーネントにアニメーションを付ける時、以下のように書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
・・・ render() { return ( <View> {/* テキスト */} <View> <Animatable.Text> ZOOM </Animatable.Text> </View> {/* View */} <Animatable.View> <Icon/> </Animatable.View> </View> ); } ・・・ |
＜View＞コンポーネントの代わりに＜Animatable.View＞
＜Text＞コンポーネントの代わりに＜Animatable.Text＞
のように実装します。(＜Image＞コンポーネントも同じように書きます。)
プロパティ
アニメーションのプロパティは以下になります。(一部抜擢)
| animation | アニメーションの名前。使用可能なアニメーションについては、 react-native-animatableで確認 |
| duration | アニメーションの実行時間（ms） |
| delay | アニメーションを遅延時間（ms） |
| direction(※1) | アニメーションの方向。詳しくは、以下の表に記載 |
| easing | アニメーションのタイミング関数 |
| iterationCount | アニメーションを実行する回数。”infinite”を設定することで アニメーションをループさせることができる |
| iterationDelay | アニメーションの反復間で一時停止する時間（ms） |
direction(アニメーションの方向)(※1)
- normal: 設定したアニメーションの動作。
- reverse: 設定アニメーションの逆の動作。
- alternate: 設定したアニメーションの動作→逆の動作
- alternate-reverse: 設定したアニメーションの逆の動作→設定したアニメーションの動作
3.2 refを使ったアニメーションの発火方法
実装
サンプルコード|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; import * as Animatable from 'react-native-animatable'; export default class App extends React.Component { constructor(props) { super(props); this.state = { OnOff: false, } } zoom = () => { this.setState({OnOff: !this.state.OnOff}) if(this.state.OnOff == true) { this.AnimationRefZoom.zoomIn(); } else { this.AnimationRefZoom.zoomOut(800); } } render() { return ( <View style={{flex: 1}}> {/* テキスト */} <View style={styles.content}> <Animatable.Text ref={ref => (this.AnimationRefZoom = ref)} style={styles.text} > ZOOM </Animatable.Text> {/* ボタン */} <View style ={{marginTop: 50}}> <TouchableOpacity onPress={this.zoom} > <Text style={styles.button}>ZoomButton</Text> </TouchableOpacity> </View> </View> </View> ); } } const styles = StyleSheet.create({ content: { flex: 1, alignSelf: "center", justifyContent: "center", }, text: { fontSize: 30, alignSelf: "center", justifyContent: "center", }, button: { alignSelf: "center", justifyContent: "center", borderWidth: 1, borderColor: "black", borderBottomColor: 5, borderRadius: 10, padding: 10, backgroundColor: 'hsla(210, 90%, 80%, 0.9)', overflow: "hidden", fontSize: 24 } }) |
サンプルコードについて解説
ref
を使うことで、ユーザー操作(ボタンの押下)によってイベントが発生した時にアニメーションを実行させることができます。
以下のようにユーザー操作とアニメーションを紐付けします。
3.3 自作アニメーションの作成方法
実装
サンプルコード|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React from 'react'; import { StyleSheet, View } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import * as Animatable from 'react-native-animatable'; const LightsUp = { 0: { opacity: 1, scale: 0.7, }, 0.5: { opacity: 0.2, scale: 2, }, 1: { opacity: 0.9, scale: 0.7, }, }; export default class App extends React.Component { render() { return ( <View style={{flex: 1, backgroundColor: 'hsla(0, 0%, 0%, 0.1)',}}> <Animatable.View animation={LightsUp} duration={500} iterationCount="infinite" style={styles.content}> <Icon name="star" size={100} color="yellow" /> </Animatable.View> </View> ); } } const styles = StyleSheet.create({ content: { flex: 1, alignSelf: "center", justifyContent: "center", }, }) |
サンプルコードについて解説
animatableでは、自作のアニメーションを作ることができます。
キーフレーム(0〜1の値)にopacity(不透明度)とscale(大きさ)を設定することでアニメーションを作成することができます。
4.1 まとめ
簡単にアニメーションを導入でき、アニメーションの量も豊富であり、おすすめのライブラリです。是非、react-native-animatableライブラリを使うことをおすすめします。
