Použití více animací v jednom komponentu pomocí Framer motion variant

Question 1

Jsem nová-Framer pohybu, to, co se snažím udělat, je napodobovat volant pohybu pohyblivého obrazu, když je rotující
Nevím, jak, aby to fungovalo
Snažil jsem se něco jako toto, ale to nefunguje

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

pomoc, prosím ,

Question 2

Vypadá to, že se snažíte oživit dvě vlastnosti (x a rotate) s různými přechod hodnot.

Můžete pouze animovat, aby jedna varianta, takže pokud chcete, aby se stalo ve stejné době, budete muset kombinovat tyto do jednoho varianta. Naštěstí, můžete určit jedinečný přechod hodnoty pro jakékoli oživení nemovitostí o výpis v rámci transition objekt.

Takhle:

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

Tak, jak to máš nastavit, objekt bude pokračovat v otáčení i po x animace skončí (repeat: Infinity). Je to to, co chcete? Můžete se podívat do Ovládání Animace , pokud chcete větší kontrolu.

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

Vypadá to, že se snažíte oživit dvě vlastnosti (x a rotate) s různými přechod hodnot.

Můžete pouze animovat, aby jedna varianta, takže pokud chcete, aby se stalo ve stejné době, budete muset kombinovat tyto do jednoho varianta. Naštěstí, můžete určit jedinečný přechod hodnoty pro jakékoli oživení nemovitostí o výpis v rámci transition objekt.

Takhle:

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

Tak, jak to máš nastavit, objekt bude pokračovat v otáčení i po x animace skončí (repeat: Infinity). Je to to, co chcete? Můžete se podívat do Ovládání Animace , pokud chcete větší kontrolu.

Použití více animací v jednom komponentu pomocí Framer motion variant

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii