使用 use-gesture 实现手势驱动动画

@use-gesture/react 是一个手势识别库，旨在与 react-spring 无缝协作。它可以识别拖动、捏合、滚动、悬停、移动和滚轮手势，并提供经过规范化的手势状态，您可以将其直接传入弹簧设置函数，以实现流畅、基于物理效果的交互。

useDrag 钩子会在每次拖动事件发生时触发回调。该回调会接收一个手势状态对象，其中包含以下关键属性：位移（从拖动开始位置算起的总位移）、速度（当前速度）、方向（每个轴为 1 或 -1）、首次（拖动开始时为 true）、最后一次（拖动结束时为 true）以及事件（原始 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 跟踪水平方向的位移。如果用户释放时的速度高于阈值，OR 移动距离超过屏幕宽度的一半，就将卡片动画移动到屏幕外（api.start({ x: window.innerWidth })），然后将其从列表中移除。否则，将卡片弹回中心位置。

usePinch 可以识别触摸屏上的双指捏合手势，以及桌面端的 Ctrl+滚轮操作。手势状态包含 scale（相对于捏合开始时的当前缩放级别）和 origin（捏合的中心点）。将其连接到跟踪缩放比例的弹簧，即可在图像或地图上创建平滑且有边界的缩放交互。

useHover 会在指针进入或离开元素时触发，并提供一个 active 布尔值。useMove 会跟踪元素内的鼠标位置，并提供规范化坐标。两者都适合实现磁性悬停效果，让元素在光标靠近时轻微地向光标方向移动。

use-gesture 钩子可以组合使用。您可以在同一个元素上同时使用 useDrag 和 usePinch：const bindDrag = useDrag(...); const bindPinch = usePinch(...)，然后展开两个绑定函数：...bindDrag() ...bindPinch()。use-gesture 会自动区分不同的手势类型。

use-gesture 钩子返回的 bind() 函数有什么作用？

@use-gesture/react 提供 useDrag、usePinch、useScroll、useHover 和 useMove。每个钩子都会返回一个 bind() 函数，其展开结果会将手势事件连接到 DOM 元素。手势状态提供位移、速度、方向、首次和最后一次等信息。将其与 react-spring 的命令式 api.start() 结合，可实现基于物理效果的交互动画。使用速度实现甩出或关闭，并使用边界限制移动范围。