如何控制Framer Motion中SVG路径动画的方向？

核心原因 #

SVG路径的动画方向由路径的绘制顺序（即d属性中点的定义顺序）决定，Framer Motion默认沿路径原始绘制方向执行动画。若部分路径的点是从右到左定义的，动画自然会反向。

具体解决方案 #

1. 反转SVG路径的绘制顺序 #

直接修改目标路径的d属性，将点的顺序倒转（比如交换起点和终点，调整中间点顺序），确保所有路径的绘制方向统一（如均从左到右）。这是最彻底的解决方式。

2. 反向设置offsetDistance动画值 #

无需修改原始SVG，通过调整offsetDistance的起止值强制反转动画方向：

• 正向动画：0% → 100%
• 反向动画：100% → 0%

示例代码：

import { motion } from "framer-motion";

// 正向路径动画
<motion.path
  d="M10 10 L100 10"
  stroke="#000"
  strokeWidth={2}
  initial={{ offsetDistance: "0%" }}
  animate={{ offsetDistance: "100%" }}
  transition={{ duration: 2 }}
/>

// 强制反向的路径动画
<motion.path
  d="M100 10 L10 10"
  stroke="#000"
  strokeWidth={2}
  initial={{ offsetDistance: "100%" }}
  animate={{ offsetDistance: "0%" }}
  transition={{ duration: 2 }}
/>

3. 结合useMotionValue自定义控制 #

若需更精细的动画逻辑，可通过useMotionValue和useTransform手动控制偏移方向：

import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";

function AnimatedPath({ path, reverse = false }) {
  const controls = useAnimation();
  const progress = useMotionValue(0);
  const offsetDistance = useTransform(
    progress,
    [0, 1],
    reverse ? ["100%", "0%"] : ["0%", "100%"]
  );

  controls.start({ progress: 1, transition: { duration: 2 } });

  return (
    <motion.path
      d={path}
      stroke="#000"
      strokeWidth={2}
      style={{ offsetDistance }}
    />
  );
}

// 使用时给需反向的路径传reverse={true}
<AnimatedPath path="M100 10 L10 10" reverse={true} />

4. 统一pathLength属性 #

避免手动给不同路径设置不一致的pathLength值，让浏览器自动计算路径长度，防止因长度差异导致的动画方向或速度异常。

额外提示 #

若使用motion.svg包裹多路径，建议给每个motion.path单独配置动画参数，避免继承导致的方向混乱。可借助浏览器开发者工具查看路径的绘制顺序，快速定位需要调整的路径。

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