Zastosuj kilka animacji w jednym składniku z wykorzystaniem możliwości ruchu ramki

Question 1

Jestem nowy w ruchu фреймера, to, co staram się zrobić, to symulować ruch koła, przesuwając obraz podczas jego obrotów
Nie wiem, jak sprawić, by to działać
Próbowałem coś takiego, ale to nie działa

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

każda pomoc, proszę

Question 2

Wygląda na to, próbujesz ożywić dwie właściwości (x i rotate) z różnymi wartościami przejścia.

Możesz animować tylko jedna opcja na raz, więc jeśli chcesz, aby odbywały się jednocześnie, trzeba będzie połączyć je w jeden wariant. Na szczęście, można określić unikatowe wartości przejścia dla każdego анимирующего właściwości, wymieniając go w transition obiekt.

Podobny do tego:

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

Jak go tworzyli, obiekt nadal będzie się kręcić nawet po zakończeniu animacji x (repeat: Infinity). To jest to, czego chcesz? Można zbadać elementy sterowania animacją, jeśli chcesz uzyskać więcej kontroli.

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

Wygląda na to, próbujesz ożywić dwie właściwości (x i rotate) z różnymi wartościami przejścia.

Możesz animować tylko jedna opcja na raz, więc jeśli chcesz, aby odbywały się jednocześnie, trzeba będzie połączyć je w jeden wariant. Na szczęście, można określić unikatowe wartości przejścia dla każdego анимирующего właściwości, wymieniając go w transition obiekt.

Podobny do tego:

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

Jak go tworzyli, obiekt nadal będzie się kręcić nawet po zakończeniu animacji x (repeat: Infinity). To jest to, czego chcesz? Można zbadać elementy sterowania animacją, jeśli chcesz uzyskać więcej kontroli.

Zastosuj kilka animacji w jednym składniku z wykorzystaniem możliwości ruchu ramki

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii