React Springによるアニメーション化の手法を解説【画像付き】
thumb_reactspring_01
React Springによるアニメーション化の手法を解説【画像付き】
言語
アンドエンジニア編集部
2022.05.23
この記事でわかること
React Springはバネの動作を原点と知るアニメーションライブラリです
react-springライブラリを使用し、静的なデータがアニメーション化できます
豊富なアニメーションサンプルが掲載されており、学習はサンプルコードを使用します

React Springとは

img_reactspring_01

React Spring(react-spring)は、spring-physics(ばねの物理学)を原点とするアニメーションライブラリです。ばねの伸び縮みの起動と持続時間(Curve and Duration)をアニメーション化するようなイメージです。

react-springを使うことで、静的なデータがアニメーション化できます。公式サイトによると、「Animated」と「React-Motion」の影響を受けて開発しているとの説明がされています。 【参考】:react-spring

そもそもアニメーションとは静止画を動画のように見せる技法を指し、 react-springはReactにこの技法を実装するライブラリーです。開発時に影響を受けたと公言している「Animated」は、ReactおよびReact Nativeのアニメーションライブラリです。

「React-Motion」もReactで利用するアニメーションライブラリです。APIをシンプル化することに主眼が置かれています。 【参考】:animatedjs / animated 【参考】:chenglou / react-motion

react-springは、AnimatedとReact-Motionの宣言・定義をより簡単に実装したようなイメージとなります。ReactではHooks(フック)が機能提供されたことで利用範囲が拡大しました。react-springにおいてもTypeScriptでの使用が可能となっています。

TypeScriptとは?JavaScriptとの違いも解説!

React概要

コードのベースとなるReactは、Facebook(現Meta)とコミュニティによって開発されたJavaScriptライブラリです。ユーザーインターフェース構築に用いられており、コード開発が簡単で動作が軽くウェブアプリや静的サイトでも対応可能です

「コンポーネント」という部品から複雑なユーザーインターフェースを組み立てることができますので、モジュールの再利用性が高く、開発生産性が総合的に高いことが特長となります。 【参考】:React

react-springのインストール

 react-springのインストールは、パッケージマネージャを使用します。Node.jsをインストールしている場合はGitHubのnpm(Node Package Manager)が利用できます。またはyarnを使用します。 【参考】:npm

具体的なパッケージマネージャの利用方法は、以下の通りです。React環境がセットアップされていない場合は、Node.jsインストールの後で次のように環境を設定します。この例では、プロジェクトのフォルダを”testapp”として作業しています。 npx create-react-app testapp cd testapp

続いて、インストール先の作業フォルダで以下のコマンドを実行し、react-springをインストールします。npmを使ったインストールでは以下のコマンドを実行します。 npm install react-spring

なお、最新(v17.0.2)で動かす場合には、以下のバージョンを指定します。(2022年3月時点)

npm install react-spring@8.0.27

yarnを使ったインストールの場合は以下の通りです。 yarn add react-spring

img_reactspring_02

 【図】:作業フォルダ―でのコマンド実行例

図の例では、npmを用いてreact-springをインストールしました。実行は以下のようにコマンドを起動します。 npm start

ブラウザ画面が起動し、「http://localhost:3000/」にReactの画面が表示されれば成功です。App.jsにReact Springのコードを追加したり、別ファイルに作成しimportしたりして作業を進めます。

react-springの使い方

基本的なreact-springの用法は、「useSpring」から始めます。基本構文は以下の通りです。 useSpring({ from: { ... }, to: { ... }, delay: 100, onRest: () => ... }) ・from  objタイプを指定し、アニメーションの初期値のスタイルを設定します。 ・to  obj・fn・array(obj)タイプを指定し、アニメーションの開始から終了時のスタイルを設定します。 ・delay  number・fnタイプを指定し、開始ディレイを設定します。 ・onRest  アニメーション終了時に発火するコールバック関数を渡します。

この他にloopの設定等も行うことができます。どれを使うか迷いますので実際のサンプルを見ながら使い方を決めていきます。例えば、useSpringのドキュメントのサンプルコードと必要な定義をApp.jsに埋め込むと、次の図のようにアニメーションテキストが簡単に表示できます。 【参考】:react-spring And this is how you create a chain

img_reactspring_03

 【図】:useSpringのコードをApp.jsに埋め込み、アニメーション化したウェブページ

埋め込んだApp.jsの実際のコードは以下の通りです。参考にしてください。 import { useSpring, animated } from 'react-spring' import logo from './logo.svg'; import './App.css'; function App() {   const styles = useSpring({     loop: true,     to: [       { opacity: 1, color: '#ffaaee' },       { opacity: 0, color: 'rgb(14,26,19)' },     ],     from: { opacity: 0, color: 'red' },   })   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <p>           Edit <code>src/App.js</code> and save to reload.         </p>         <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>         <animated.div style={styles}>I will fade in and out</animated.div>       </header>     </div>    ); } export default App;

5つのHooks(フック)

5つのHooksが主要なものです。最初にライブラリから必要なHook(フック)を選択し、アニメーション動作を決めていきます。

useChain  複数のアニメーションを待ち行列に入れたり、連結したりします。  【参考】:react-spring useChain

img_reactspring_04

 【図】:useChainのサンプルコード「CHAIN」の状態遷移

useSpring  1つのバネ(Spring)で、A地点からB地点へ移動するイメージです。 【参考】:react-spring useSpring

img_reactspring_05

 【図】:useSpringのサンプルコード「CARD」の状態遷移

useSprings  複数のSpringリストを用い、A地点からB地点へ移動します。 【参考】:react-spring useSprings

img_reactspring_06

 【図】:useSpringsのサンプルコード「DRAGGABLE LIST」の状態遷移

useTrail  複数のバネが同一の軌跡をたどります。 【参考】:react-spring useTrail

img_reactspring_07

 【図】:useTrailのサンプルコード「TRAIL」の状態遷移

useTransition  変化点の連結・解除を行います。 【参考】:react-spring useTransition

img_reactspring_08

 【図】:useTransitionのサンプルコード「IMAGE FADE」の状態遷移

この5つのAPIを用いて、アプリケーションに必要な条件をインプットしていきます。

React Springのサンプルは?

React Springでは、Demoと称して多くのサンプルを掲載しています。最初は公式サイトのDemoの表示とコードを参考にするのが良いでしょう。 【参考】:react-spring useChain Demos 【参考】:react-spring useSpring Demos 【参考】:react-spring useSprings Demos 【参考】:react-spring useTrail Demos 【参考】:react-spring useTransition Demos 【参考】:react-spring Prallax Demos

さらにReact Springのサンプルは、オンラインコード編集サイトの「CodeSandbox」に多数掲載されています。React Springの公式サイトで使用しているサンプルの実際のコードは、CodeSandboxに掲載されています。CodeSandboxはちょっとしたコード開発と動作確認がしやすいので、アニメーションイメージを確認しながら進めるときに活用できます。 【参考】:React Spring Examples

React Springの学習はアニメーションサンプルから始めましょう

img_reactspring_09

React-Springは機能が多いので、インストールしてもなかなか使いこなすのに時間を要します。手始めとしてはCodeSandboxのサンプルコードが理解しやすいです。JavaScriptに加えて、TypeSciptのコードサンプルも多数掲載されています。

React SpringはJavaScriptに加えてTypeScriptでも動作するため、豊富な機能を豊富なサンプルを活用し学んでいくことがおすすめです。

TypeScript入門編として利用する際に覚えておくポイント
気になる人のTwitterをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

はじめて転職される方へ
IT・Webエンジニアの「よくある転職活動のお悩み」や「転職活動の流れ」とは?
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
エンジニア求人

編集部おすすめコンテンツ

はじめて転職される方へ
IT・Webエンジニアの「よくある転職活動のお悩み」や「転職活動の流れ」とは?
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT