使用Framer Motion variants在单组件实现多动画：模拟车轮滚动效果

你的代码存在3个核心问题导致动画未生效：

• 错误使用了transitionDuration属性，Framer Motion中过渡配置统一放在transition字段下
• 旋转动画的起始/结束值设置错误，无法实现持续正向滚动
• 两个并行动画的过渡配置没有做隔离，导致属性冲突覆盖

下面是修复后的完整代码：

import { motion, Variants } from "framer-motion";

const imageRunning: Variants = {
  hidden: {
    x: "-100vw",
    opacity: 0,
    rotate: 0 // 初始化旋转角度
  },
  visible: {
    x: 0,
    opacity: 1,
    transition: {
      x: {
        duration: 3, // 位移总时长3秒，和原设置保持一致
        ease: "linear" // 匀速位移匹配滚动效果
      },
      opacity: {
        duration: 0.5 // 透明度可单独设置动画时长
      }
    }
  },
  rotation: {
    rotate: 360,
    transition: {
      repeat: Infinity,
      duration: 1, // 每秒转一圈，可根据车轮大小调整避免打滑
      ease: "linear",
      repeatType: "loop"
    }
  }
}

const HomePage = () => {
  return (
    <div className={style.animationContainer}>
      <motion.img 
        className={style.animatedImage}
        variants={imageRunning}
        initial="hidden"
        animate={["visible", "rotation"]}
        width={100} 
        height={100} 
        src="/static/me.jpg" 
        alt="滚动元素"
      />
    </div>
  )
}

效果优化说明 #

如果需要实现完全真实的无打滑滚动效果，可以根据车轮周长计算旋转时长：用位移总距离除以车轮周长得到总旋转圈数，再用位移总时长除以总圈数得到单圈旋转时长，代入rotation的duration参数即可。

内容的提问来源于stack exchange，提问作者mohammad ismael