Fundamentos de React Spring: hook useSpring

Las animaciones CSS tradicionales utilizan una duración fija: la animación se reproduce durante X milisegundos y se detiene. react-spring anima los valores mediante física de resortes: la animación está impulsada por tension (la rigidez del resorte) y friction (cuánto se opone el resorte al movimiento). Esto produce un movimiento que desacelera de forma natural y transmite una sensación orgánica.

El hook useSpring({ from, to }) define un valor animado. Especifique los valores iniciales en from y los valores de destino en to. useSpring devuelve un objeto springs en el que cada clave es un SpringValue: una versión animada del valor numérico o de color correspondiente.

La opción config controla el comportamiento del resorte. tension (valor predeterminado: 170) controla la rigidez; los valores más altos hacen que vuelva a su posición más rápidamente. friction (valor predeterminado: 26) controla la amortiguación; los valores más bajos producen más rebote. mass (valor predeterminado: 1) añade inercia. Estos tres valores juntos definen el carácter de la animación.

react-spring incluye configuraciones preestablecidas que puede utilizar sin ajustarlas: config.default es equilibrada y de uso general, config.gentle es lenta y fluida, config.wobbly rebota con poca fricción, config.stiff es rápida y con una respuesta inmediata, y config.slow es muy gradual. Impórtelas desde react-spring.

Los valores devueltos por useSpring son objetos SpringValue, no números normales. No puede renderizarlos directamente en JSX ni utilizarlos en objetos de estilo normales. Debe aplicarlos a componentes animated.*, que saben cómo suscribirse a las actualizaciones del spring y aplicarlas al DOM de forma eficiente.

Pasar immediate: true a useSpring hace que los valores salten instantáneamente a su objetivo, omitiendo la animación del spring. Esto resulta útil durante el renderizado inicial, cuando el usuario ha activado «reducir el movimiento» en la configuración de su sistema operativo o cuando necesita restablecer la posición mediante programación sin ningún movimiento visual.

Puede invertir una animación de spring alternando qué valores se encuentran en from y to. Un patrón habitual consiste en almacenar un estado booleano de alternancia y calcular from/to en función de él: cuando toggle es false, se anima de 0 a 1; cuando es true, se anima de 1 a 0. react-spring realiza una transición fluida entre los estados.

useSpring puede devolver un array de dos elementos: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). El objeto api le proporciona control mediante programación. Llame a api.start({ x: 100 }) para animar hasta un nuevo valor, a api.stop() para congelar la animación y a api.set({ x: 50 }) para cambiar al valor indicado sin animación.

Utilice la forma declarativa useSpring({ from, to }) cuando la animación dependa de un estado de React que cambie normalmente. Utilice la forma imperativa con api.start() cuando necesite activar animaciones desde controladores de eventos, gestos u operaciones asíncronas sin provocar nuevos renderizados de React.

useSpring acepta callbacks del ciclo de vida en su configuración. onStart se ejecuta cuando el spring comienza a animarse. onChange se ejecuta en cada frame con el valor actual, lo que resulta útil para efectos secundarios que siguen la posición. onRest se ejecuta cuando el spring se estabiliza en su valor final, lo que indica que la animación ha terminado.

En la forma declarativa, useSpring vuelve a ejecutar automáticamente la animación cuando cambian los valores que se le pasan. Por ejemplo, useSpring({ opacity: isVisible ? 1 : 0 }) animará la opacidad cada vez que cambie isVisible. Esta es la forma más sencilla de vincular las animaciones de spring al estado de un componente.

En la configuración de react-spring, ¿qué controlan tension y friction?

react-spring anima mediante física: tension (rigidez), friction (amortiguación) y mass definen el movimiento. useSpring({ from, to }) devuelve objetos SpringValue que se aplican a componentes animated.*. Las configuraciones predefinidas (gentle, wobbly, stiff, slow) cubren casos habituales. La API imperativa [springs, api] permite controlar la animación mediante api.start(), api.stop() y api.set(). onRest se ejecuta cuando la animación se estabiliza.