La aplicación de múltiples animaciones en uno de los componentes utilizando el Artífice de movimiento variantes

Question 1

Soy nuevo por el Artífice de movimiento, lo que estoy tratando de hacer es una imitación de la rueda de movimiento por la imagen en movimiento mientras está girando
No sé cómo hacer este trabajo
He probado algo como esto pero no funciona

    const imageRuning :Variants = {
                                   hidden:{
                                          x:"-100vw",
                                          opacity:0
                                         },
                                  visible:{
                                          x:0,
                                          opacity:1,
                                          transitionDuration:"3s"

                                           },
                                   rotation:{
                                            rotate:[180,0],
                                            transition:{
                                                  repeat:Infinity,
                                                  type:"tween",
                                                  ease:"linear"
                                                  }
                                             }
                                       }
  
            const  HomePage =()=> {

                   return (

                        <div className={style.animationContainer}>
                             <motion.img 
                                  className={style.animatedImage}
                                  variants={imageRuning}
                                  initial="hidden"
                                  animate={["visible","rotation"]}
                                  width={100} height={100} src="/static/me.jpg" >
                             </motion.img>
                        </div>
              )

cualquier ayuda por favor ,

Question 2

Parece que están tratando de animar dos propiedades (x y rotate) con diferentes transición de valores.

Usted sólo puede animar a una variante en el tiempo, así que si quieres que sucedan al mismo tiempo, tendrás que combinar en una sola variante. Por suerte, usted puede especificar transición únicos valores para la animación de la propiedad con una lista dentro de la transition objeto.

Como este:

visible: {
  x: 0,
  opacity: 1,
  rotate: 180, // rotate and x animate in the same variant
  transition: {
    duration: 3, // default transition duration (applies to x and opacity)
    rotate: {
      // unique transition for rotate property only
      repeat: Infinity,
      type: "tween",
      ease: "linear"
    }
  }
}

La forma en que lo han creado, el objeto de continuar con la rotación, incluso después de la x de animación acabados (repeat: Infinity). Es eso lo que quieres? Usted puede mirar en los Controles de Animación si desea tener más control.

Cadin · Answer 1 · 2021-11-22T23:13:31

Parece que están tratando de animar dos propiedades (x y rotate) con diferentes transición de valores.

Usted sólo puede animar a una variante en el tiempo, así que si quieres que sucedan al mismo tiempo, tendrás que combinar en una sola variante. Por suerte, usted puede especificar transición únicos valores para la animación de la propiedad con una lista dentro de la transition objeto.

Como este:

visible: {
  x: 0,
  opacity: 1,
  rotate: 180, // rotate and x animate in the same variant
  transition: {
    duration: 3, // default transition duration (applies to x and opacity)
    rotate: {
      // unique transition for rotate property only
      repeat: Infinity,
      type: "tween",
      ease: "linear"
    }
  }
}

La forma en que lo han creado, el objeto de continuar con la rotación, incluso después de la x de animación acabados (repeat: Infinity). Es eso lo que quieres? Usted puede mirar en los Controles de Animación si desea tener más control.

La aplicación de múltiples animaciones en uno de los componentes utilizando el Artífice de movimiento variantes

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría