2018年4月12日

react-springでリッチなアニメーションを実現する【今日のGitHubトレンド】

はじめに

Reactを使ってリッチなサービスを作る際、少し苦戦するのがアニメーション処理です。
実装する際は、公式アドオンのReact Transition Group
やシンプルなvelocity-react、恐らく一番人気のreact-motionなどのライブラリを使うことが多いのではないでしょうか。

今回はアニメーションライブラリのreact-springをご紹介します。

デモはこちらをご覧ください。

いくつかサンプルをご紹介します。

react-springとは

react-springはReact Nativeのanimatedをベースにしており、また前述のreact-motionの良いところを踏襲しつつ足りない部分を補填しています。

animatedについては、以前こちらの記事でも解説しましたね。

アニメーションをつける【これからはじめるReact Native】

では、実際に使っていきましょう。
今回はパッとReact環境を構築できるcreate-react-appを使ってみましょう。

create-react-appで開発環境構築

まずcreate-react-appをインストールします。
npm install -g create-react-app

次にプロジェクトを作ります。
create-react-app react-spring-sample

そして作成された react-spring-sampleディレクトリでnpm startをするだけです。
あとは http://localhost:3000/ が開かれてこちらの画面が表示されます。

とっても簡単ですよね！

次に npm install react-spring でreact-springをインストールしたら準備完了です。

transitionのサンプルを作る

ではreact-springでtransition効果（時間変化）によるアニメーションのサンプルを作ってみましょう。

ふわっとtransition効果のアニメーションが出来ていますね。

では、コードを見ていきます。
App.js

import React, { Component } from 'react';
import { Transition, animated } from 'react-spring'

const defaultStyles = {
  cursor: 'pointer',
  position: 'absolute',
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: 'white',
  fontWeight: 800,
  fontSize: '16em'
}
const A = styles => <animated.div style={{ ...defaultStyles, ...styles, backgroundColor: '#247BA0' }}>eishis</animated.div>
const B = styles => <animated.div style={{ ...defaultStyles, ...styles, backgroundColor: '#B2DBBF' }}>bagelee</animated.div>

class App extends Component {
  state = { toggled: true }
  toggle = e => this.setState(state => ({ toggled: !state.toggled }))
  render() {
    return (
      <div onClick={this.toggle}>
        <Transition
          native
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
          config={{ tension: 5, friction: 10 }}>
          {this.state.toggled ? A : B}
        </Transition>
      </div>
    );
  }
}

export default App;

いくつかポイントを見ていきます。

const A = styles => <animated.div style={{ ...defaultStyles, ...styles, backgroundColor: '#247BA0' }}>eishis</animated.div>
const B = styles => <animated.div style={{ ...defaultStyles, ...styles, backgroundColor: '#B2DBBF' }}>bagelee</animated.div>

こちらで const変数（再代入不可の変数）のAとBに animatedコンポーネントを代入しています。

class App extends Component {
  state = { toggled: true }
  toggle = e => this.setState(state => ({ toggled: !state.toggled }))
  render() {
    return (
      <div onClick={this.toggle}>
        <Transition
          native
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
          config={{ tension: 5, friction: 10 }}>
          {this.state.toggled ? A : B}
        </Transition>
      </div>
    );
  }
}

state = { toggled: true } まずtoggeledに初期値のtrueを設定しています。

toggle = e => this.setState(state => ({ toggled: !state.toggled }))
toggleイベントを設定しています。
toggle（状態切替をする）イベントの鉄板の書き方です。

toggleイベントでは、toggledに、現在のstate.toggledの否定を設定しています。
つまり、trueだった場合はfalseを、falseだった場合はtrueを設定してね　というオンオフを切り替える処理です。

<div onClick={this.toggle}>
ここで描画エリアがクリックされた際に、先程のtoggleイベントが呼び出され、toggledのstateが変更され、再レンダリングされます。

        <Transition
          native
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
          config={{ tension: 5, friction: 10 }}>
          {this.state.toggled ? A : B}
        </Transition>

最後にTransitionコンポーネントの設定です。
いくつかアニメーション描画用のpropsがあります。
fromでアニメーション開始時のスタイルを設定しています。この場合opacity（不透明度）は0としていますね。つまり完全透明な状態です。
enter はこのオブジェクトが現れたときのopacityを1、つまり完全に不透明な状態としています。
leave はこのオブジェクトが非表示になるときの設定です。
configはアニメーションの設定をしており、tensionは表示スピード、frictionはアニメーションの滑らかさを設定しています。