Framer Motion Variants 是 Framer Motion 的官方技能，用于定义可复用的动画状态并进行编排。当需要构建多步骤动画、跨多个元素的协调动画，或使用 variants 进行基于状态的动画控制时，可应用此技能。Variants 是 Framer Motion 定义可复用动画状态并加以编排的方式。相关技能：核心动画属性请使用 framer-motion-core；React 集成请使用 framer-motion-react；滚动驱动的 variants 请使用 framer-motion-scroll。
定义 Variants
Variants 是定义动画状态的对象。示例中，container 定义 hidden 与 visible 状态，并在 visible 的 transition 中设置 staggerChildren: 0.1；item 定义 hidden（opacity: 0, y: 20）与 visible（opacity: 1, y: 0）。组件通过 motion.div 的 variants、initial="hidden"、animate="visible" 使用，子元素使用 item 变体。
Variant 类型
静态 Variants：以 initial、animate、exit 等状态直接定义属性。
动态 Variants：状态值为函数，接收 custom 参数，返回属性对象，例如 animate: (custom) => ({ x: custom * 100, opacity: 1 })。
编排
staggerChildren：交错子元素动画，可在 transition 中同时设置 staggerChildren 与 delayChildren。
staggerDirection：控制交错方向，1 为向前，-1 为向后。
重复动画
可在 variants 的 animate 中使用关键帧数组（如 scale: [1, 1.5, 1]），并在 transition 中设置 duration、repeat（可为 Infinity）与 repeatType。repeatType 可选 "loop"（从头重新开始）、"reverse"（向前再向后）、"mirror"（每次重复时交换状态）。
关键帧
可动画经过多个值，例如 x: [0, 100, -50, 0] 与 backgroundColor 的颜色数组，并通过 transition 的 times 数组（如 [0, 0.3, 0.6, 1]）控制时间点。
基于 custom 的状态机
可定义 idle、hovered、pressed 等状态，通过 variants 配合 animate={state} 与 custom={state} 实现状态机式控制。
父子协调
容器变体可设置 transition: { staggerChildren: 0.1, when: "beforeChildren" }，子变体定义各自的 hidden/visible 及 transition（如 duration: 0.3），实现父子间的协调。
最佳实践
使用 variants 实现可复用、可协调的动画；使用 staggerChildren 处理列表动画；使用 custom 属性传递动态值；为 AnimatePresence 定义 exit 变体；使用 when 选项协调父子动画。
不应做
不要错误地混用 motion values 与 variants；不要忘记变体的 transition 可能被覆盖；不要使用过多变体状态（保持在 3–5 个）；不要忘记在需要时传递 custom。
了解更多
https://www.framer.com/motion/animation/ https://www.framer.com/motion/variants/