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環境を構築できる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
はアニメーションの滑らかさを設定しています。
まとめ
今回はreact-spring
の中でも代表的なTransitionをご紹介しました。
補間性やパフォーマンス面でもreact-animation
より優れていると紹介されておりなめらかなアニメーションを実現可能です。
また書き方もシンプルで使いやすいと思いますので、ぜひ試してみてください。
Reactのお仕事に関するご相談
Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
4
1
関連記事

2022年5月13日
Reactでオセロゲームを作る

2021年4月9日
Slack OAuth x React で Slack ユーザー認証を作ってみた!

2021年3月1日
Reactで使えるバリデーションライブラリを紹介!

2021年2月22日
Hasura Cloud × Auth0 × React でお手軽にTodoアプリを作ってみた!

2020年12月12日
Blitz.jsとTailwind CSSでメモ帳アプリの作成【第2弾】

2020年12月8日
コンポーネントを実装するときに意識すること
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!