Introducción a las animaciones en React con React Spring

En este artículo, exploraremos uno de los mejores marcos de animación para React: React Spring. Aprenderá algunos conceptos básicos sobre cómo cambiar el estilo de sus componentes para lograr transiciones suaves basadas en la física.

Prerrequisitos

React Spring tiene una API basada en hooks y otra basada en componentes. Analizaremos exclusivamente el uso de hooks con estado básico para todas nuestras animaciones. Por lo tanto, si necesitas repasar los hooks de React, te recomiendo este artículo.

Instalación y configuración

Por supuesto, necesitaremos React-Spring y podemos usar Create React App para comenzar.

$ npx create-react-app react-spring-example$ cd react-spring-example$ npm i react-spring 

Desde y hasta

En nuestro App.jsarchivo vamos a necesitar useSpringy animateddesdeReacción-primavera.

useSpringes un gancho personalizado al que podemos configurar nuestro estilo, toma un objeto con los valores fromy tocomo estados de inicio y fin mientras que react-spring maneja la transición entre ellos. fromy topuede tomar objetos de casi todas las propiedades css: color, tamaño, transformación e incluso nuestra barra de desplazamiento. Para aplicar nuestra animación de primavera, solo necesitamos agregar animatednuestras etiquetas HTML y pasar nuestra animación a nuestro estilo. De manera predeterminada, esto se ejecuta tan pronto como se monta el componente.

Pasar de un valor a otro puede resultar un poco aburrido, pero React-Spring nos permite usar matrices para renderizar animaciones con múltiples etapas. Solo recuerda incluir siempre el estado inicial con cualquier propiedad que quieras agregar.

Aplicación.js

import React, { useState } from 'react';import { useSpring, animated } from 'react-spring';const App = () = {  const animation = useSpring({    from: { opacity: 0 },    to: { opacity: 1 }  });  const colorAnimation = useSpring({    from: { color: 'blue' },    to: { color: `rgb(255,0,0)` }  });  const multiAnimation = useSpring({    from: { opacity: 0, color: 'red' },    to: [        { opacity: 1, color: '#ffaaee' },        { opacity: 1, color: 'red' },        { opacity: .5, color: '#008000' },        { opacity: .8, color: 'black' }    ]  });  return (    div      animated.h1 style={animation}Hello World/animated.h1      animated.h1 style={colorAnimation}Hello World/animated.h1      animated.h1 style={multiAnimation}Hello World/animated.h1    /div  )};export default App;

Estado

Agregar un estado local nos permitirá agregar algunas interacciones reales a nuestras animaciones, en lugar de realizar transiciones al montar. En lugar de fromy, topodemos usar un operador ternario para nuestras animaciones de un solo paso.

Aplicación.js

import React, { useState } from 'react';const App = () = {  const [on, toggle] = useState(false);  const animation = useSpring({    color: on ? 'blue' : 'red'  });  return (    div      animated.h1 style={animation}{!on ? "I'm red" : "Now I'm blue" }/animated.h1      button onClick={() = toggle(!on)}Change/button    /div  )};

Interpolar

Además de agregar cambios de estilo estáticos a nuestros elementos y componentes, podemos crear animaciones más interesantes y reutilizables utilizando el interpolatemétodo. Podemos agregar variables a nuestro resorte, ya que también es un objeto, y usarlas interpolatepara extraerlas para nuestros estilos.

Solo necesitamos extraer nuestro valor de nuestro resorte y usarlo interpolatepara desestructurarlo un poco más, colocarlo en algunos literales de plantilla y listo. Esto nos permitirá la libertad de establecer valores más dinámicos, como un valor de color que se basa en la posición x.

Aplicación.js

const App = () = {  const [on, toggle] = useState(false);  const { xy } = useSpring({    from: { xy: [0, 0], c: 'green' },    xy: on ? [800, 200] : [0, 0],    c: on ? 'red' : 'green'  });  return (    div      animated.h1        style={{             transform: xy.interpolate((x, y) = `translate(${x}px, ${y}px)`),             color: c.interpolate(c = c)}}        {!on ? "I'm here" : "Now I'm over here"}/animated.h1      button onClick={() = toggle(!on)}Change/button    /div  )};

Imitación de fotogramas clave

Uno de los aspectos más útiles de interpolatees que podemos emular fotogramas clave CSS. En lugar de pasar un valor a nuestro resorte, simplemente lo estableceremos en 1 o 0. Antes de poder interpolarlo como antes, necesitamos pasar un objeto con un rangey un output. El rango puede ser cualquier valor entre 0 y 1 y funciona como establecer puntos de interrupción con fotogramas clave CSS, la salida correspondiente es el valor que se renderizará previamente.

Luego, un segundo interpolaterestablecerá nuestro estilo en cada cambio de salida.

Aplicación.js

const App = () = {  const [on, toggle] = useState(false)  const { x, c } = useSpring({    from: { xy: [0, 0], c: 0 },    x: on ? 1 : 0,    c: on ? 1 : 0  })  return (     div      animated.h1        style={{          transform: x.interpolate({            range: [0, .25, .5, .75, 1],            output: [0, 500, 200, 800, 500]          }).interpolate(x = `translateX(${x}px)`),          color: c.interpolate({            range: [0, .5, 1],            output: ['red', 'blue', 'green']          }).interpolate(c = c)        }}        {!on ? "I'm here" : "Now don't know where I'm going"}/animated.h1      button onClick={() = toggle(!on)}Change/button    /div  )}

Configuración

Por sí solo, el ejemplo anterior es muy abrupto y discordante. Esto se debe a la configuración predeterminada de React-Spring. Las animaciones se basan principalmente en algunas propiedades que podemos manipular fácilmente en nuestro Spring. Los documentos tienen un maravilloso ejemplo interactivo que realmente ayuda a obtener una idea intuitiva de las diferentes propiedades.

• mass:Afecta la velocidad y hasta qué punto sobrepasa la transición.
• tension:Afecta la velocidad general.
• friction:Controla la resistencia y la rapidez con la que se desacelera.
• clamp:Si alguna vez debería sobrepasar las transiciones.

Aplicación.js

const animation = useSpring({    {/* ... */}    config: {      mass: 5,      tension: 50,      friction: 25,      clamp: true    }  });

Para ayudarnos, el equipo de React-Spring incluso incluyó algunos ajustes preestablecidos de configuración que podemos importar y que serán muy útiles.

• config.default{masa: 1, tensión: 170, fricción: 26}
• config.gentle{masa: 1, tensión: 120, fricción: 14}
• config.wobbly{masa: 1, tensión: 180, fricción: 12}
• config.stiff{masa: 1, tensión: 210, fricción: 20}
• config.slow{masa: 1, tensión: 280, fricción: 60}
• config.molasses{masa: 1, tensión: 280, fricción: 120}

Aplicación.js

import { useSpring, animated, config } from 'react-spring';const animation = useSpring({    {/* ... */}    config: config.wobbly  });// Or you can just destructure it if you want to change other options const animation = useSpring({    {/* ... */}    config: {        ...config.molasses,         clamp: true    }  });

Conclusión

Si bien los ejemplos aquí pueden no haber sido los más llamativos, espero que sean suficientes para ayudarte a comprender los conceptos básicos detrás de las animaciones de React usando react-spring. ✨