2018年4月12日

プログラミング

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より優れていると紹介されておりなめらかなアニメーションを実現可能です。
また書き方もシンプルで使いやすいと思いますので、ぜひ試してみてください。

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

1

AUTHOR

eishis

Eishi Saito 総務

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

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

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

kobori

こぼり ともろう エンジニア

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

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

いわもと

いわもと

kobari

taishi kobari

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

shogokubota

kubota shogo

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

nishi tomoya

aihara

aihara

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

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

CONTACT PAGE TOP