动画组件与样式插值

react-spring 为所有 HTML 元素提供了动画版本：animated.div、animated.span、animated.img、animated.button 等。它们可以直接替代对应的原生元素，关键区别在于：它们能够接受 SpringValue 对象作为样式属性。

普通 React 元素接收的样式是包含静态值的普通对象。SpringValues 是特殊对象，它们会在每个动画帧更新，而不经过 React 的重新渲染周期。只有 animated.* 组件知道如何订阅 SpringValue 更新，并直接修改 DOM 样式，从而完全绕过 React，以获得最高性能。

将弹簧值直接作为 animated 组件的 CSS 样式属性应用。例如：style={{ opacity: opacity, transform: transform }}，其中 opacity 和 transform 是 useSpring 返回的 SpringValue。animated.div 会在每次 RAF（requestAnimationFrame）时钟跳动时读取这些值，并将其应用到 DOM 节点。

SpringValue 具有 .to() 方法，可用于转换其输出。常见用途是将数值弹簧值转换为 CSS 字符串：x.to(v => "translateX(" + v + "px)")。该函数接收当前数值，并返回转换后的输出，然后将其作为样式应用。

.to() 方法还接受数组输入，用于进行范围映射：x.to([0, 1], ["#ff0000", "#00ff00"]) 会将弹簧值从范围 [0, 1] 映射到从红色到绿色的颜色范围。这就是将数值弹簧插值为颜色、字符串或任何无法用普通数字表示的值的方式。

当一个弹簧同时跟踪多个值时，您可以将它们一起进行插值。对于跟踪 { x, y } 的弹簧，您可以写成：x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)")。.to() 回调会按照这些值在弹簧配置中出现的顺序接收所有值。

您可以使用 animated() 包装自己的组件：const AnimatedCard = animated(Card)。被包装的组件必须接受 style 属性，并将其转发给 DOM 元素。这样，AnimatedCard 就可以像 animated.div 一样，在其样式属性中接收 SpringValue。

复杂动画通常会组合多个弹簧。例如，进入动画可以使用一个弹簧控制不透明度，另一个弹簧控制垂直位置。您可以将两者应用到同一个 animated.div：style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}。

react-spring 最重要的性能特点是，动画值的更新会绕过 React 的协调器。弹簧播放动画时，React 不会在每一帧重新渲染组件。相反，animated.* 组件会在每个 requestAnimationFrame 回调中直接更新 DOM 节点的样式属性，因此无需承担 React 的额外开销也能实现每秒 60 帧的动画。

常见的插值动画模式包括：使用 opacity.to([0, 1], [0, 1]) 在挂载时淡入，使用 scale.to(s => "scale(" + s + ")") 在悬停时放大，以及使用 rotation.to(r => "rotate(" + r + "deg)") 在切换时旋转。将这些变换串联起来可以创建复合效果。

默认情况下，使用范围数组的 .to() 可以超出定义的范围进行外推。您可以使用 extrapolate 选项进行控制：x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) 会防止输出低于 0 或高于 100，即使弹簧发生过冲也是如此。这对进度条和有边界的动画非常有用。

应用弹簧值时，为什么必须使用 animated.div，而不能使用普通的 div？

animated.div、animated.span 和 animated(CustomComponent) 都是可以直接替代原组件的组件，并且能够接受 SpringValues 作为样式属性。.to() 方法可以对弹簧值进行插值，将其映射为 CSS 字符串、颜色范围或任何输出格式。多个弹簧可以自然地组合到同一个元素上。关键性能优势在于：弹簧更新会通过 RAF 回调直接修改 DOM 样式，从而绕过 React 重新渲染。