A aplicação multi animações em um componente usando o Framer movimento variantes

Question 1

Eu sou novo por Framer de movimento, o que eu estou tentando fazer é imitar roda de movimento através da imagem em movimento, enquanto ela está girando
Eu não sei como fazer este trabalho
Eu tentei algo parecido com isto, mas ele não 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>
              )

alguma ajuda por favor ,

Question 2

Parece que você está tentando animar duas propriedades (x e rotate) com diferentes transição de valores.

Você só pode animar para uma variante no tempo, então, se você quer que eles ocorrem ao mesmo tempo, você precisa combiná-las em uma única variante. Felizmente, você pode especificar única transição de valores para qualquer animação propriedade listando-la dentro de transition objecto.

Como esta:

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"
    }
  }
}

A maneira de tê-lo criado, o objeto vai continuar girando, mesmo depois de o x animação termina (repeat: Infinity). É isso que você quer? Você pode olhar para Controles de Animação , se você deseja ter mais controle.

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

Parece que você está tentando animar duas propriedades (x e rotate) com diferentes transição de valores.

Você só pode animar para uma variante no tempo, então, se você quer que eles ocorrem ao mesmo tempo, você precisa combiná-las em uma única variante. Felizmente, você pode especificar única transição de valores para qualquer animação propriedade listando-la dentro de transition objecto.

Como esta:

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"
    }
  }
}

A maneira de tê-lo criado, o objeto vai continuar girando, mesmo depois de o x animação termina (repeat: Infinity). É isso que você quer? Você pode olhar para Controles de Animação , se você deseja ter mais controle.

A aplicação multi animações em um componente usando o Framer movimento variantes

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria