React Springの基礎：useSpringフック

従来の CSS アニメーションでは固定された時間を使います。アニメーションは X ミリ秒かけて再生され、停止します。react-spring は、ばねの物理法則を使って値をアニメーションさせます。アニメーションは、tension（ばねの硬さ）と friction（ばねが動きに抵抗する強さ）によって駆動されます。これにより、自然に減速する、有機的な動きが生まれます。

useSpring({ from, to }) フックは、アニメーションする値を定義します。from に開始値を、to に目標値を指定します。useSpring は springs オブジェクトを返します。各キーは SpringValue となり、対応する数値または色の値をアニメーション可能にしたものです。

config オプションは、ばねの動作を制御します。tension（デフォルト 170）は硬さを制御し、値が大きいほど速く跳ね戻ります。friction（デフォルト 26）は減衰を制御し、値が小さいほど大きく弾みます。mass（デフォルト 1）は慣性を加えます。この 3 つの値によって、アニメーションの性質が決まります。

react-spring には、細かく調整せずに使えるプリセット設定が用意されています。config.default はバランスの取れた汎用設定、config.gentle はゆっくりで滑らかな設定、config.wobbly は friction が小さく弾む設定、config.stiff は速くきびきびした設定、config.slow は非常にゆるやかな設定です。これらは react-spring からインポートできます。

useSpringが返す値は通常の数値ではなく、SpringValueオブジェクトです。これらをJSXで直接レンダリングしたり、通常のstyleオブジェクトで使用したりすることはできません。スプリングの更新を購読し、DOMに効率よく適用する方法を知っているanimated.*コンポーネントに適用する必要があります。

useSpringにimmediate: trueを渡すと、値はスプリングアニメーションを経由せず、目標値へ即座に移動します。これは、初回レンダリング時、OSの設定で「reduce motion」が有効になっている場合、または視覚的な動きなしに位置をプログラムでリセットする必要がある場合に便利です。

fromとtoのどちらに各値を置くかを切り替えることで、スプリングアニメーションを反転できます。一般的なパターンは、真偽値の切り替え状態を保持し、それに基づいてfrom/toを計算する方法です。toggleがfalseのときは0から1へ、trueのときは1から0へアニメーションします。react-springは状態間を滑らかに遷移させます。

useSpringは2要素の配列を返すことができます。const [springs, api] = useSpring(() => ({ from: { x: 0 } }))。apiオブジェクトを使うと、プログラムから制御できます。api.start({ x: 100 })を呼び出すと新しい値へのアニメーションを開始し、api.stop()を呼び出すとアニメーションを停止してその状態を保持し、api.set({ x: 50 })を呼び出すとアニメーションなしで値を移動できます。

アニメーションが通常どおり変化するReactの状態に依存する場合は、宣言型のuseSpring({ from, to })を使用します。Reactの再レンダリングを発生させずに、イベントハンドラー、ジェスチャー、非同期処理からアニメーションを開始する必要がある場合は、api.start()を使う命令型を使用します。

useSpringの設定には、ライフサイクルコールバックを指定できます。onStartはスプリングがアニメーションを開始したときに呼び出されます。onChangeは現在の値とともに毎フレーム呼び出されるため、位置を追跡する副作用に便利です。onRestはスプリングが最終値で停止したときに呼び出され、アニメーションの完了を知らせます。

宣言型では、渡した値が変化するとuseSpringが自動的にアニメーションを再実行します。たとえば、useSpring({ opacity: isVisible ? 1 : 0 })はisVisibleが変化するたびにopacityをアニメーションさせます。これは、スプリングアニメーションをコンポーネントの状態に結び付ける最も簡単な方法です。

react-springのconfigで、tensionとfrictionは何を制御しますか？

react-springは物理演算を使ってアニメーションします。tension（剛性）、friction（減衰）、massが動きを定義します。useSpring({ from, to })は、animated.*コンポーネントに適用するSpringValueオブジェクトを返します。プリセット設定（gentle、wobbly、stiff、slow）で一般的なケースに対応できます。命令型APIの[springs, api]を使うと、api.start()、api.stop()、api.set()によってプログラムから制御できます。アニメーションが停止するとonRestが呼び出されます。