Introducción e instalación de React Spring

React spring es una biblioteca de animación que simplifica la animación de elementos de la interfaz de usuario. Se basa en la física de los resortes, lo que le ayuda a lograr un aspecto y una sensación naturales. Es diferente de otras bibliotecas de animación donde alguien tiene que lidiar con curvas, suavizado, duraciones de tiempo, todo lo cual está sincronizado entre sí.

Plataformas: React spring es una biblioteca multiplataforma, es compatible con react, react-native, web y muchas más plataformas. También tiene soporte para todos los navegadores.

Instalación: para instalar esta biblioteca en su proyecto, puede usar el siguiente comando desde el directorio raíz de su aplicación:

npm install react-spring

Aplicación de muestra: para ver lo simple que es realizar animaciones con esta biblioteca, creemos un pequeño proyecto. Crearemos esta animación simple usando la biblioteca de resorte de reacción.

• Paso 1: Cree una nueva aplicación usando el siguiente comando.

  npx create-react-app reactspringdemo

• Paso 2: ahora mueva la carpeta del proyecto creado usando el siguiente comando.

  cd reactspringdemo

• Paso 3: Instale la biblioteca de resortes de reacción.

  npm install react-spring

Crearemos un componente LoopingCard que gira sobre su eje z. App.jsx es el componente principal que utiliza el componente LoopingCard.

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto.

Ejemplo: La forma en que se usa el resorte de reacción es muy simple. He usado el gancho useSpring que toma un objeto que refleja cómo debe desarrollarse la animación. Para aplicar estos accesorios, tenemos que usar las versiones extendidas de los elementos definidos en el módulo animado . Simplemente establecer el atributo de estilo en el objeto devuelto por useSpring animará el elemento.

import React from 'react';
import { useSpring, animated } from 'react-spring'
   
const LoopingCard = ()=> {
   
    /**
     * Define the style for the animation
     * using the useSpring hook
     */
    const styles = useSpring({
        loop: true,
        from: {rotateZ: 0},
        to: {rotateZ: 360},
        duration: 2000,
    });
   
    /**
     * Animated div is the extended version of div that 
     * accepts the properties defined above.
     */
    return (<animated.div
            style={{
                width: 80,
                height: 80,
                backgroundColor: 'd6d6d6',
                borderRadius: 16,
                boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'green',
                margin: 250,
                ...styles,
            }} >GFG</animated.div>
    );
}
   
export default LoopingCard;

Use el componente LoopingCard en el archivo App.jsx y ejecute la aplicación con el siguiente comando.

import React from 'react'
import LoopingCard from './LoopingCard'
  
function App() {
  console.log('hello')
  return (
    <>
      <LoopingCard />
    </>
  );
}
  
export default App;

Para ejecutar la aplicación: Ejecute el siguiente comando.

npm start

Producción: