framer-motion-variants

Framer Motion 变体

何时使用此技能

在构建多步骤动画、协调多个元素之间的动画，或使用变体控制基于状态的动画时使用。变体是 Framer Motion 定义可复用动画状态并编排动画的方式。

相关技能： 使用 framer-motion-core 了解核心动画属性；使用 framer-motion-react 了解 React 集成；使用 framer-motion-scroll 了解滚动驱动的变体。

定义变体

变体是定义动画状态的对象：

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
};

function Component() {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {[1, 2, 3].map(i => (
        <motion.div key={i} variants={item} />
      ))}
    </motion.div>
  );
}

变体类型

静态变体

const variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 }
};

动态变体

const variants = {
  animate: (custom) => ({
    x: custom * 100,
    opacity: 1
  })
};

编排

staggerChildren

错开子元素动画：

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  }
};

staggerDirection

transition: {
  staggerChildren: 0.1,
  staggerDirection: -1  // 1 = forward, -1 = backward
}

重复动画

const variants = {
  animate: {
    scale: [1, 1.5, 1],
    transition: {
      duration: 2,
      repeat: Infinity,
      repeatType: "loop"  // "loop" | "reverse" | "mirror"
    }
  }
};

repeatType 选项

类型	行为
"loop"	从头开始重新播放
"reverse"	先正向播放，再反向播放
"mirror"	每次重复时交换状态

关键帧

在多个值之间进行动画：

<motion.div
  animate={{
    x: [0, 100, -50, 0],
    backgroundColor: ["#ff0000", "#00ff00", "#0000ff"]
  }}
  transition={{
    duration: 2,
    times: [0, 0.3, 0.6, 1]
  }}
/>

使用 custom 创建状态机

const states = {
  idle: { scale: 1 },
  hovered: { scale: 1.1 },
  pressed: { scale: 0.95 }
};

function Component({ state }) {
  return (
    <motion.div
      variants={states}
      animate={state}
      custom={state}
    />
  );
}

父子协调

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      when: "beforeChildren"
    }
  }
};

const child = {
  hidden: { x: -20, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1,
    transition: { duration: 0.3 }
  }
};

最佳实践

• ✅ 使用 variants 创建可复用、协调一致的动画。
• ✅ 使用 staggerChildren 创建列表动画。
• ✅ 使用 custom 属性传递动态值。
• ✅ 为 AnimatePresence 定义 exit 变体。
• ✅ 使用 when 选项协调父子动画。

请勿

• ❌ 错误地混用 motion 值和变体。
• ❌ 忘记变体的过渡效果可能会被覆盖。
• ❌ 使用过多变体状态（控制在 3-5 个）。
• ❌ 忘记在需要时传递 custom。

了解更多

https://www.framer.com/motion/animation/ https://www.framer.com/motion/variants/