React Springによるアニメーション化の手法を解説【画像付き】

React Springとは

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は、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

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

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

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

基本的な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

　【図】：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が主要なものです。最初にライブラリから必要なHook（フック）を選択し、アニメーション動作を決めていきます。

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

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

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

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

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

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

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

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

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

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

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

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の学習はアニメーションサンプルから始めましょう

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

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

TypeScript入門編として利用する際に覚えておくポイント