Componentes animados e interpolación de estilos

react-spring proporciona versiones animadas de todos los elementos HTML: animated.div, animated.span, animated.img, animated.button, etc. Son reemplazos directos de sus equivalentes nativos, con una diferencia fundamental: pueden aceptar objetos SpringValue como propiedades de estilo.

Los elementos normales de React reciben style como un objeto simple con valores estáticos. SpringValues son objetos especiales que se actualizan en cada frame de la animación sin pasar por el ciclo de nuevos renderizados de React. Solo los componentes animated.* saben cómo suscribirse a las actualizaciones de SpringValue y modificar directamente el estilo del DOM, omitiendo por completo React para obtener el máximo rendimiento.

Aplique los valores del spring directamente como propiedades de estilo CSS en componentes animated. Por ejemplo: style={{ opacity: opacity, transform: transform }}, donde opacity y transform son SpringValues de useSpring. animated.div lee estos valores en cada tick de RAF (requestAnimationFrame) y los aplica al nodo del DOM.

Los SpringValues tienen un método .to() para transformar su salida. Un caso de uso habitual es convertir un valor numérico del spring en una cadena CSS: x.to(v => "translateX(" + v + "px)"). La función recibe el valor numérico actual y devuelve el resultado transformado, que se aplica como estilo.

El método .to() también acepta arrays como entrada para asignar rangos: x.to([0, 1], ["#ff0000", "#00ff00"]) asigna el valor del spring del rango [0, 1] al rango de colores del rojo al verde. Así puede interpolar springs numéricos a colores, cadenas u otros valores que no se puedan representar como un número simple.

Cuando un spring sigue varios valores simultáneamente, puede interpolarlos juntos. Para un spring que sigue { x, y }, puede escribir: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). El callback de .to() recibe todos los valores en el orden en que aparecen en la configuración del spring.

Puede envolver sus propios componentes con animated(): const AnimatedCard = animated(Card). El componente envuelto debe aceptar una propiedad style y reenviarla a un elemento del DOM. A partir de ese momento, AnimatedCard puede recibir SpringValues en su propiedad style, igual que animated.div.

Las animaciones complejas suelen combinar varios springs. Por ejemplo, una animación de entrada puede utilizar un spring para la opacidad y otro para la posición vertical. Puede aplicar ambos al mismo animated.div: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

La característica de rendimiento más importante de react-spring es que las actualizaciones de los valores animados omiten el reconciliador de React. Mientras un spring se está animando, React NO vuelve a renderizar el componente en cada frame. En su lugar, el componente animated.* actualiza directamente la propiedad de estilo del nodo del DOM en cada callback de requestAnimationFrame, lo que permite animaciones a 60 fps sin la sobrecarga de React.

Patrones habituales de animación con interpolación: aparecer gradualmente al montar el componente mediante opacity.to([0, 1], [0, 1]), aumentar la escala al pasar el cursor mediante scale.to(s => "scale(" + s + ")") y rotar al alternar mediante rotation.to(r => "rotate(" + r + "deg)"). Encadenar estas transformaciones crea efectos compuestos.

De forma predeterminada, .to() con arrays de rangos puede extrapolar más allá del rango definido. Puede controlarlo con la opción extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }) evita que la salida sea menor que 0 o mayor que 100, incluso si el spring se pasa del objetivo. Esto resulta útil para barras de progreso y animaciones con límites.

¿Por qué debe utilizar animated.div en lugar de un div normal al aplicar valores de spring?

animated.div, animated.span y animated(CustomComponent) son reemplazos directos que aceptan SpringValues como propiedades de estilo. El método .to() interpola valores de spring: los convierte en cadenas CSS, rangos de colores o cualquier otro formato de salida. Varios springs se combinan de forma natural en un mismo elemento. La principal ventaja de rendimiento es que las actualizaciones de los springs omiten los nuevos renderizados de React al modificar directamente los estilos del DOM en callbacks de RAF.