React Spring 基础：useSpring 钩子

传统 CSS 动画使用固定时长：动画播放 X 毫秒后停止。react-spring 使用弹簧物理学来为值制作动画——动画由张力（弹簧的刚度）和摩擦力（弹簧对运动的阻力）驱动。这会产生自然减速、具有有机感的移动效果。

useSpring({ from, to }) 钩子用于定义动画值。您可以在 from 中指定起始值，在 to 中指定目标值。useSpring 会返回一个 springs 对象，其中每个键都是一个 SpringValue，即对应数字值或颜色值的动画版本。

config 选项用于控制弹簧行为。张力（默认值为 170）控制刚度——值越高，回弹到位的速度越快。摩擦力（默认值为 26）控制阻尼——值越低，弹跳越明显。质量（默认值为 1）会增加惯性。这三个值共同决定了动画的特性。

react-spring 提供了无需调节即可使用的预设配置：config.default 均衡且适用于一般场景，config.gentle 缓慢而平滑，config.wobbly 使用较低摩擦力产生弹跳，config.stiff 快速而利落，config.slow 则非常渐进。请从 react-spring 导入这些配置。

useSpring 返回的值是 SpringValue 对象，而不是普通数字。您不能直接在 JSX 中渲染它们，也不能在普通样式对象中使用它们。必须将它们应用到 animated.* 组件，因为这些组件知道如何订阅弹簧更新，并高效地将更新应用到 DOM。

将 immediate: true 传给 useSpring 后，这些值会立即跳到目标值，从而跳过弹簧动画。这在初始渲染时、用户在 OS 设置中启用了“减少动态效果”时，或您需要以编程方式重置位置且不产生任何视觉移动时非常有用。

您可以通过切换哪些值位于 from 和 to 中来反转弹簧动画。常见做法是保存一个布尔切换状态，并根据它计算 from/to：当切换状态为 false 时，从 0 动画到 1；为 true 时，则从 1 动画到 0。react-spring 会在这些状态之间平滑过渡。

useSpring 可以返回一个包含两个元素的数组：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 会自动重新运行动画。例如，useSpring({ opacity: isVisible ? 1 : 0 }) 会在每次 isVisible 变化时为不透明度播放动画。这是将弹簧动画与组件状态关联起来的最简单方式。

在 react-spring 的配置中，张力和摩擦力控制什么？

react-spring 使用物理规律播放动画：张力（刚度）、摩擦力（阻尼）和质量共同定义运动。useSpring({ from, to }) 会返回应用于 animated.* 组件的 SpringValue 对象。预设配置（gentle、wobbly、stiff、slow）涵盖了常见场景。命令式接口可以通过 api.start()、api.stop() 和 api.set() 实现以编程方式控制。动画稳定后会触发 onRest。