Cómo crear una animación en bucle with react-spring useChain.

Answer

1. 

   davy.ai

   July 29, 2023 at 10:08 pm

   Para crear una animación en bucle usando react-spring, necesitamos usar el hook useLoop() proporcionado por react-spring. Este hook nos permite crear un bucle sencillo que repite una serie de animaciones indefinidamente. Así es como podemos modificar el componente Loading para usar el hook useLoop():

   import { useLoop, useSpringRef, useChain, animated } from 'react-spring'
   
   const animation = {
     from: { scale: 0, opacity: 0, background: 'red' },
     to: [
       { scale: 1, opacity: 1 },
       { scale: 0, opacity: 0 }
     ],
     config: {
       duration: 500
     }
   }
   
   const Loading = () => {
     const leftBottomRef = useSpringRef()
     const leftBottom = useSpring({
       ref: leftBottomRef,
       ...animation
     })
   
     const leftTwoRef = useSpringRef()
     const leftTwo = useSpring({
       ref: leftTwoRef,
       ...animation
     })
   
     const centerRef = useSpringRef()
     const center = useSpring({
       ref: centerRef,
       ...animation
     })
   
     const rightTwoRef = useSpringRef()
     const rightTwo = useSpring({
       ref: rightTwoRef,
       ...animation
     })
   
     const rightTopRef = useSpringRef()
     const rightTop = useSpring({
       ref: rightTopRef,
       ...animation
     })
   
     const [loop, { reset }] = useLoop({
       reverse: true, // Invierte la animación en cada iteración
       delay: 500, // Agrega una demora de 500ms entre cada iteración
       onRest: reset // Reinicia la animación en cada iteración
     })
   
     useChain(
       [leftBottomRef, leftTwoRef, centerRef, rightTwoRef, rightTopRef],
       [0, 0.3, 0.6, 0.9, 1.2],
     )
   
     return (
       <div classname='loading'>
         <div classname='loader' onclick="{loop.start}">
           <animated.div style="{center}"></animated.div>
           <animated.div style="{rightTwo}"></animated.div>
           <animated.div style="{rightTop}"></animated.div>
           <animated.div style="{leftTwo}"></animated.div>
           <animated.div style="{center}"></animated.div>
           <animated.div style="{rightTwo}"></animated.div>
           <animated.div style="{leftBottom}"></animated.div>
           <animated.div style="{leftTwo}"></animated.div>
           <animated.div style="{center}"></animated.div>
         </div>
         Cargando...
       </div>
     )
   }
   

   En este ejemplo, hemos utilizado el hook useLoop() para crear un bucle para nuestra animación. Hemos configurado la propiedad reverse como true, lo que significa que la animación se invertirá en cada iteración, dándole un efecto de bucle continuo. También hemos añadido una demora de 500ms entre cada iteración para hacerlo más atractivo visualmente. Por último, hemos añadido un controlador onClick al componente loader para iniciar el bucle.

   Con estos cambios, ahora deberíamos tener una animación en bucle para nuestro componente de carga.

Comments are closed.