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

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

目次

  1. はじめに
  2. react-springとは
  3. アニメーションを作ってみる
  4. まとめ

はじめに

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

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

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

いくつかサンプルをご紹介します。
vertical.gif (2.1 MB)
sunburst.gif (1.5 MB)
areas.gif (354.1 kB)
trails.gif (801.9 kB)

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/ が開かれてこちらの画面が表示されます。
 2018-04-12 0.34.25.png (29.7 kB)

とっても簡単ですよね!

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

transitionのサンプルを作る

ではreact-springでtransition効果(時間変化)によるアニメーションのサンプルを作ってみましょう。
aa.gif (416.8 kB)
ふわっと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はアニメーションの滑らかさを設定しています。

まとめ

今回はreact-springの中でも代表的なTransitionをご紹介しました。
補間性やパフォーマンス面でもreact-animationより優れていると紹介されておりなめらかなアニメーションを実現可能です。
また書き方もシンプルで使いやすいと思いますので、ぜひ試してみてください。

Author Profile

eishis
eishis
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。
マーケター・ディレクター・エンジニアなど何でも屋。
COBOLからReactまで色んなことやります。

この記事は
参考になりましたか?

PAGE TOP