use-gestureによるジェスチャー駆動アニメーション

@use-gesture/reactは、react-springとシームレスに連携するよう設計されたジェスチャー認識ライブラリです。drag、pinch、scroll、hover、move、wheelのジェスチャーを認識し、正規化されたジェスチャー状態を提供します。この状態をスプリングのセッターに直接渡すことで、物理ベースの滑らかなインタラクションを実現できます。

useDragフックは、ドラッグイベントが発生するたびにコールバックを実行します。コールバックは、主要なプロパティを持つジェスチャー状態オブジェクトを受け取ります。movement（ドラッグ開始時点からの合計移動量）、velocity（現在の速度）、direction（各軸の1または-1）、first（ドラッグ開始時にtrue）、last（ドラッグ終了時にtrue）、event（元のDOMイベント）です。

すべてのuse-gestureフックはbind()関数を返します。bind()を呼び出すと、イベントハンドラープロパティ（onPointerDown、onTouchStartなど）のオブジェクトが返されます。このオブジェクトを、インタラクティブにしたい要素にスプレッドします。これが、ジェスチャー認識機能とDOM要素を接続するポイントです。

標準的なパターンでは、命令型API（[springs, api] = useSpring(...)）でスプリングを作成し、useDragを使って各ドラッグイベントでapi.start({ x: movement[0], y: movement[1] })を呼び出します。スプリングがドラッグの動きに滑らかに追従するため、そうしなければ硬直したカーソル追跡になる動作に、自然な物理挙動を加えられます。

ドラッグが終了したとき（ジェスチャー状態のlast: true）、通常は要素を元の位置に戻します。if (last)のチェック内でapi.start({ x: 0, y: 0 })を呼び出します。react-springはスプリング物理によって、即座にリセットするのではなく穏やかに弾むように元の位置へアニメーションさせるため、操作に心地よい物理的な感覚を与えられます。

ジェスチャー状態のvelocity値を使うと、投げ飛ばす動作を実現できます。ユーザーが高い速度で指を離したときは、元の位置に戻すのではなく、ドラッグ方向へ要素を投げ飛ばせます。if (last && velocity[0] > threshold)を確認し、その後、要素を画面外の最終位置までアニメーションさせます。これはスワイプして閉じる操作に欠かせません。

コンテナ内にドラッグの移動を制限するには、スプリングに渡す前に移動量をクランプします。x: Math.max(-maxX, Math.min(maxX, movement[0]))のように記述します。別の方法として、use-gestureに組み込まれたboundsオプションを使い、useDrag(handler, { bounds: { left: -100, right: 100 } })と記述すれば、ジェスチャー状態を自動的にクランプできます。

モバイルでスワイプして閉じる機能を実装するには、useDragで水平方向の移動を追跡します。ユーザーがしきい値を超える速度で指を離した場合、または画面幅の半分を超えて移動した場合は、カードを画面外へアニメーションさせ（api.start({ x: window.innerWidth })）、その後リストから削除します。それ以外の場合は、中央の位置に戻します。

usePinchは、タッチスクリーンでの2本指によるピンチジェスチャーと、デスクトップでのCtrl+wheelを認識します。ジェスチャー状態には、scale（ピンチ開始時を基準とした現在のズーム倍率）とorigin（ピンチの中心点）が含まれます。スケールを追跡するスプリングに接続することで、画像やマップに滑らかで範囲を制限したズーム操作を実現できます。

useHoverはポインターが要素に入ったとき、または要素から離れたときに実行され、activeの真偽値を提供します。useMoveは要素内のマウス位置を追跡し、正規化された座標を提供します。どちらも、カーソルが近づくと要素がわずかにカーソルの方向へ移動する、マグネティックホバー効果に役立ちます。

use-gestureのフックは組み合わせて使用できます。同じ要素でuseDragとusePinchを使用し、const bindDrag = useDrag(...); const bindPinch = usePinch(...)のように定義してから、両方のbind関数を...bindDrag() ...bindPinch()のようにスプレッドします。use-gestureがジェスチャーの種類の判別を自動的に処理します。

use-gestureフックが返すbind()関数は何をするものでしょうか？

@use-gesture/reactは、useDrag、usePinch、useScroll、useHover、useMoveを提供します。各フックはbind()関数を返し、その戻り値をスプレッドすることで、ジェスチャーイベントをDOM要素に接続できます。ジェスチャー状態にはmovement、velocity、direction、first、lastが含まれます。react-springの命令型api.start()と組み合わせることで、物理ベースのインタラクティブなアニメーションを実現できます。velocityはフリングや閉じる操作に、boundsは移動量のクランプに使用します。