Uplatňovanie multi animácie v jeden komponent pomocou Framer pohybu varianty

Question 1

Som nový podľa Framer pohybu, čo sa snažím urobiť, je napodobňovanie pohybu kolesa posunutím obrazu, keď je rotujúce
Neviem, ako robiť túto prácu
Snažil som sa niečo takéto, ale nefunguje to

    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>
              )

akúkoľvek pomoc, prosím ,

Question 2

Vyzerá to, že ste sa snaží oživiť dve vlastnosti (x a rotate) s rôznymi prechod hodnoty.

Môžete len animovať na jeden variant v čase, takže ak ich chcete, aby sa stalo v rovnakom čase, budete musieť kombinovať tých, do jedného variantu. Našťastie, môžete zadať jedinečný prechod hodnoty pre všetky symbolmi vlastníctva, výpis to v rámci transition objekt.

Ako toto:

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

Spôsob, ako to máte nastavené, objekt bude pokračovať rotujúce aj po x animácie končí (repeat: Infinity). Je to to, čo chcete? Môžete sa pozrieť do Animácie ovládacie Prvky ak chcete mať väčšiu kontrolu.

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

Vyzerá to, že ste sa snaží oživiť dve vlastnosti (x a rotate) s rôznymi prechod hodnoty.

Môžete len animovať na jeden variant v čase, takže ak ich chcete, aby sa stalo v rovnakom čase, budete musieť kombinovať tých, do jedného variantu. Našťastie, môžete zadať jedinečný prechod hodnoty pre všetky symbolmi vlastníctva, výpis to v rámci transition objekt.

Ako toto:

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

Spôsob, ako to máte nastavené, objekt bude pokračovať rotujúce aj po x animácie končí (repeat: Infinity). Je to to, čo chcete? Môžete sa pozrieť do Animácie ovládacie Prvky ak chcete mať väčšiu kontrolu.

Uplatňovanie multi animácie v jeden komponent pomocou Framer pohybu varianty

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii