React Spring（リアクトスプリング）は、React 向けに作られた物理ベースのアニメーションライブラリです。Paul Henschel 氏（drcmda）らによって 2018 年頃から開発されており、バネ（spring）の物理モデルをベースに、tension（張力）、friction（摩擦）、mass（質量）といったパラメータでアニメーションの硬さや跳ね方を直感的に制御できるのが特徴です。固定 duration ではなく「物理シミュレーション」でアニメーションを記述するため、ユーザー操作で途中から目標値が変わっても自然に追従するインタラクティブな UI を表現できます。
この記事の目次
- spring と物理パラメータ
- useSpring と useTransition
- Framer Motion との違い
- drei・use-gesture とのエコシステム
- まとめ
spring と物理パラメータ
React Spring の中心的な概念は、目標値に向かってバネのように動く「spring」です。useSpring フックを使い、 const styles = useSpring({ x: open ? 100 : 0 }) のように現在のターゲット値を指定するだけで、React Spring が物理シミュレーションで滑らかな変化を計算してくれます。time-based なアニメーションと異なり、途中で目標値が変わってもアニメーションが「ぶつかったように」中断せず、現在の速度を保ったまま新しい目標に向かって減衰しながら近づいていきます。
アニメーションの硬さは、tension、friction、mass というパラメータで調整します。tension を上げるとバネが強くなり、より速く目標に到達し、friction を上げると振動が早く収まります。mass を増やすと慣性が大きくなり、ゆっくりと重い動きになります。これらを config プロパティに渡すか、config.gentle / config.wobbly / config.stiff といったプリセットを使うことで、UI の「触感」を細かくチューニングできます。
useSpring と useTransition
React Spring の API は複数のフックで構成されています。useSpring は単一の値を物理アニメーションさせる基本のフック、useSprings は配列に対して複数のアニメーションを並列に走らせるフック、useTransition はリストの追加・削除や条件付きレンダリングの enter / leave アニメーションを管理するフック、useChain は複数のフックを順番にチェーンさせるフックです。Framer Motion の AnimatePresence に相当する役割は、useTransition が担います。
返り値は animated 要素（animated.div など）に渡せる「アニメーション可能なスタイルオブジェクト」になっており、JSX 内で animated.div style={styles} のように使うことで、自動的にスプリングの進行に応じてレンダリングされます。通常の React コンポーネントとは別レイヤーで再描画を発生させない設計のため、Re-render が大量に起きずに済む点もパフォーマンス上の長所です。
Framer Motion との違い
React 向けアニメーションの双璧と言える React Spring と Framer Motion は、思想がやや異なります。Framer Motion は motion.div の props にスタイルを書く宣言的なスタイルが中心で、AnimatePresence や layout アニメーション、ジェスチャーといった UI 寄りの機能が豊富です。React Spring はフックベースで、物理シミュレーションを通じて値そのものを滑らかに変化させる「アニメーションエンジン」としての性格が強く、CSS スタイル以外にも数値・色・SVG パスなど任意の値を扱いやすい設計です。
実務では、UI のマイクロインタラクションを大量に書きたいプロダクトでは Framer Motion を、数値や物理感が重要な独自ビジュアライゼーション、ドラッグやジェスチャーで現実世界のような追従感を出したい場面では React Spring を選ぶ、というような使い分けが現実的です。両者とも React 用としての完成度が高く、選定で大きく後悔することは少ない選択肢です。
drei・use-gesture とのエコシステム
React Spring は単体で使うだけでなく、関連ライブラリと組み合わせることで強力なインタラクションを構築できます。同じく Paul Henschel 氏らが開発する @use-gesture は、マウス・タッチ・スクロール・ピンチなどのジェスチャーを統一的に扱うライブラリで、React Spring と組み合わせるとカルーセル、スワイプメニュー、ピンチでの拡大縮小、慣性付きドラッグなどを少ない行数で実装できます。
また、Three.js を React で扱う @react-three/fiber（R3F）との相性も非常によく、3D シーン内のオブジェクトの位置・回転・スケールを React Spring でアニメーションさせる、というスタイルが定着しています。React Native にも対応しており、Web とモバイルで同じスプリング表現を共有できる点も魅力です。TypeScript 親和性も高く、型推論を活かしながら宣言的にアニメーションを記述できます。
まとめ
React Spring は、バネの物理モデルに基づいて React のアニメーションを記述する強力なライブラリです。useSpring / useTransition などのフックを軸に、UI の触感を tension / friction / mass で直感的に制御でき、@use-gesture や R3F と組み合わせて Web/3D/ネイティブ環境で豊かなインタラクションを実装できます。物理感を重視する場面で第一候補になります。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント