【初心者向け】React Nativeのアニメーション徹底解説！Animated APIとLayoutAnimationの使い方

React Nativeには、コンポーネントにインタラクティブ性を持たせるためのアニメーション機能が標準で用意されています。アニメーションは、View、Text、Image、ScrollView、FlatList、SectionListなど、主要なコンポーネントに対して適用できます。

React Nativeが提供するアニメーションの種類は主に以下の2つです。

• Animated API
• LayoutAnimation

Animated APIとは

Animated APIは、入力値から出力値への時間ベースのアニメーションを実現するためのAPIです。ここでは、Animated.timing()を使ってボックスの幅と高さを動的に変化させる例を紹介します。

アニメーションを使用するには、まずコンポーネントをインポートします。

import { Animated } from 'react-native'

アニメーションを実装する前に、事前に設定を行う必要があります。

Animated.timing()関数は、イージング関数（easing）を利用し、指定した値を時間経過に合わせてアニメーションさせます。デフォルトのイージング関数はeaseInOutですが、他のイージング関数を選択したり、独自のものを定義したりすることも可能です。

Animated.timing()の基本構造

Animated.timing(animateparam, {
    toValue: 100,
    easing: easingfunc,
    duration: timeinseconds
}).start();

この例では、Viewの幅と高さをアニメーションさせるため、まず初期値を以下のように設定しています。

animatedWidthとanimatedHeightは、componentWillMount内で次のように初期化します。

componentWillMount = () => {
    this.animatedWidth = new Animated.Value(50)
    this.animatedHeight = new Animated.Value(100)
}

続いて、Animated.timing関数を以下のように追加します。

Animated.timing(this.animatedWidth, {
    toValue: 200,
    duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
    toValue: 500,
    duration: 500
}).start()

アニメーションの実行方法

TouchableOpacityコンポーネントをタップ（onPress）すると、this.animatedBox関数が呼び出され、その中のAnimated.timing関数によってアニメーションが実行されます。つまり、TouchableOpacityを押すたびに、Viewの幅と高さが変化します。

実装例：Animated APIを使ったコード全体

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
    componentWillMount = () => {
        this.animatedWidth = new Animated.Value(50)
        this.animatedHeight = new Animated.Value(100)
    }
    animatedBox = () => {
        Animated.timing(this.animatedWidth, {
            toValue: 200,
            duration: 1000
        }).start()
        Animated.timing(this.animatedHeight, {
            toValue: 500,
            duration: 500
        }).start()
    }
    render() {
        const animatedStyle = { width: this.animatedWidth, height:
        this.animatedHeight }
        return (
            <TouchableOpacity style = {styles.container} onPress =
                {this.animatedBox}>
                <Animated.View style = {[styles.box, animatedStyle]}/>
            </TouchableOpacity>
        )
    }
}
export default Animations
const styles = StyleSheet.create({
    container: {
        padding:100,
        justifyContent: 'center',
        alignItems: 'center'
    },
    box: {
        backgroundColor: 'gray',
        width: 50,
        height: 100
    }
})

実行結果

iOSおよびAndroid端末での表示は以下の通りです。

グレーの四角形をタップすると、アニメーションが動作します。

LayoutAnimation APIとは

LayoutAnimationは、Animated APIよりも高度な制御が可能なAPIです。次のレンダリング／レイアウトサイクルで使用される、ビューの作成・更新に関するアニメーションをグローバルに設定できます。

LayoutAnimation APIを使用するには、以下のようにインポートします。

import { LayoutAnimation } from 'react-native';

実装例：LayoutAnimationを使ったアニメーション

AndroidでLayoutAnimationを動作させるには、以下のコードが必要です。

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
import React from 'react';
import {
    NativeModules,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    StyleSheet,
    View,
} from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
    state = {
        w: 50,
        h: 50,
    };
    animatecircle = () => {
        LayoutAnimation.spring();
        this.setState({w: this.state.w + 10, h: this.state.h + 10})
    }
    render() {
        return (
            <TouchableOpacity style = {styles.container} onPress={this.animatecircle}>
                <View style={[styles.circle, {width: this.state.w, height: this.state.h}]} />
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    circle: {
        width: 200,
        height: 200,
        borderRadius: '50%',
        backgroundColor: 'green',
    },
});

実行結果

緑色の円をタップすると、スプリング効果付きのアニメーションで徐々に大きくなります。

まとめ

React Nativeのアニメーションには、細かい制御が可能なAnimated APIと、レイアウト変更を手軽にアニメーション化できるLayoutAnimationの2種類があります。用途に応じて使い分けることで、ユーザー体験を大きく向上させるリッチなUIを構築できます。