Применение нескольких анимаций в одном компоненте с использованием вариантов движения фрейма

Question 1

Я новичок в движении фреймера, то, что я пытаюсь сделать, - это имитировать движение колеса, перемещая изображение во время его вращения
Я не знаю, как заставить это работать
Я пробовал что-то подобное, но это не работает

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

любая помощь, пожалуйста ,

Question 2

Похоже, вы пытаетесь оживить два свойства (x и rotate) с различными значениями перехода.

Вы можете анимировать только один вариант за раз, поэтому, если вы хотите, чтобы они происходили одновременно, вам нужно будет объединить их в один вариант. К счастью, вы можете указать уникальные значения перехода для любого анимирующего свойства, перечислив его в transition объект.

Подобный этому:

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

Как вы его настроили, объект будет продолжать вращаться даже после завершения анимации x (repeat: Infinity). Это то, чего ты хочешь? Вы можете изучить элементы управления анимацией, если хотите получить больше контроля.

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

Похоже, вы пытаетесь оживить два свойства (x и rotate) с различными значениями перехода.

Вы можете анимировать только один вариант за раз, поэтому, если вы хотите, чтобы они происходили одновременно, вам нужно будет объединить их в один вариант. К счастью, вы можете указать уникальные значения перехода для любого анимирующего свойства, перечислив его в transition объект.

Подобный этому:

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

Как вы его настроили, объект будет продолжать вращаться даже после завершения анимации x (repeat: Infinity). Это то, чего ты хочешь? Вы можете изучить элементы управления анимацией, если хотите получить больше контроля.

Применение нескольких анимаций в одном компоненте с использованием вариантов движения фрейма

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории