应用多动画中的一种成分使用的帧运动变体

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). 这就是你想要的吗？你可以看看动画控制，如果你想要更多的控制。

应用多动画中的一种成分使用的帧运动变体

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别