Framer hareket varyantlarını kullanarak tek bir bileşende birden çok animasyon uygulama

Question 1

Framer hareketi ile yeniyim, yapmaya çalıştığım şey dönerken görüntüyü hareket ettirerek tekerlek hareketini taklit etmektir
Bunu nasıl çalıştıracağımı bilmiyorum.
Böyle bir şey denedim ama işe yaramıyor

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

herhangi bir yardım lütfen ,

Question 2

İki özelliği canlandırmaya çalışıyormuşsunuz gibi görünüyor (x ve rotate) farklı geçiş değerleri ile.

Bir seferde yalnızca bir varyanta animasyon uygulayabilirsiniz, bu nedenle bunların aynı anda olmasını istiyorsanız, bunları tek bir varyantta birleştirmeniz gerekir. Neyse ki, içinde listeleyerek herhangi bir animasyon özelliği için benzersiz geçiş değerleri belirtebilirsiniz transition nesne.

Bunun gibi:

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

Ayarladığınız şekilde, x animasyonu bittikten sonra bile nesne dönmeye devam edecektir (repeat: Infinity). İstediğin bu mu? Daha fazla kontrol istiyorsanız Animasyon Denetimlerine bakabilirsiniz.

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

İki özelliği canlandırmaya çalışıyormuşsunuz gibi görünüyor (x ve rotate) farklı geçiş değerleri ile.

Bir seferde yalnızca bir varyanta animasyon uygulayabilirsiniz, bu nedenle bunların aynı anda olmasını istiyorsanız, bunları tek bir varyantta birleştirmeniz gerekir. Neyse ki, içinde listeleyerek herhangi bir animasyon özelliği için benzersiz geçiş değerleri belirtebilirsiniz transition nesne.

Bunun gibi:

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

Ayarladığınız şekilde, x animasyonu bittikten sonra bile nesne dönmeye devam edecektir (repeat: Infinity). İstediğin bu mu? Daha fazla kontrol istiyorsanız Animasyon Denetimlerine bakabilirsiniz.

Framer hareket varyantlarını kullanarak tek bir bileşende birden çok animasyon uygulama

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride