如何在Framer Motion中独立动画SVG路径控制点

不用非得动画整个d属性，你可以用Framer Motion的useMotionValue单独管理yA、yB的数值，再实时拼接成路径字符串就行，给你具体实现步骤：

1. 创建独立的运动值
   用useMotionValue分别定义yA和yB，这俩是可以独立驱动动画的响应式值：

   import { useMotionValue, animate } from "framer-motion";
   import { useEffect } from "react";
   
   function AnimatedLine() {
     const yA = useMotionValue(50); // 初始y值
     const yB = useMotionValue(50);
   

2. 编写随机切换的动画逻辑
   写一个函数，每次生成0-100之间的随机目标值，然后用animate让yA、yB分别过渡到目标，完成后循环调用：

   const animatePoints = () => {
       const targetYA = Math.random() * 100;
       const targetYB = Math.random() * 100;
       
       animate(yA, targetYA, {
         duration: 1,
         ease: "easeInOut",
         onComplete: animatePoints // 循环触发动画
       });
       
       animate(yB, targetYB, {
         duration: 1.2, // 给不同动画时长，让运动更自然
         ease: "easeInOut"
       });
     };
   
     useEffect(() => {
       animatePoints(); // 组件挂载后启动动画
     }, []);
   

3. 实时绑定路径的d属性
   在SVG的path标签里，直接通过yA.get()和yB.get()获取实时值，拼接成线段的路径字符串：

   return (
       <svg width="100" height="100" viewBox="0 0 100 100">
         <path
           d={`M 0 ${yA.get()} L 100 ${yB.get()}`}
           stroke="#000"
           strokeWidth="2"
           fill="none"
         />
       </svg>
     );
   }
   
   export default AnimatedLine;
   

为什么之前的onUpdate没生效？ #

你之前的问题应该是只在onUpdate里打印了值，但没把运动值和path的d属性做绑定——只要让d属性的字符串依赖于yA、yB的实时值，Framer Motion的运动值更新时就会自动触发组件重渲染，路径也就跟着动了。

另外也可以用useTransform把两个运动值转换成完整的d字符串，写法更简洁：

const d = useTransform([yA, yB], ([ya, yb]) => `M 0 ${ya} L 100 ${yb}`);

然后path的d属性直接用d就行：<path d={d} ... />

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