使用 Framer 运动变体在一个组件中应用多个动画

Question

我是Framer motion的新手，我想做的是在旋转时通过移动图像来模仿车轮运动
我不知道该怎么做
我已经尝试过类似的方法，但它不起作用

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

请帮忙，

Answer 1

您似乎正在尝试为两个具有不同过渡值的属性（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)。那是你要的吗？如果您想要更多控制权，可以查看 Animation Controls。