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

2

1

AUTHOR

eishis

Eishi Saito 総務

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

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP