如何用Framer Motion的animate()函数实现组件定点移动？

方法1：计算偏移量实现精准移动 #

如果要移动到页面固定坐标或其他元素位置，别写死x/y值，先计算当前元素和目标位置的差值再执行动画：

import { animate } from "framer-motion";
import { useRef } from "react";

function MovingBox() {
  const boxRef = useRef(null);
  const targetRef = useRef(null); // 要移动到的目标元素

  const handleClick = async () => {
    if (!boxRef.current || !targetRef.current) return;
    
    // 获取当前元素和目标元素的位置信息
    const boxRect = boxRef.current.getBoundingClientRect();
    const targetRect = targetRef.current.getBoundingClientRect();
    
    // 计算需要移动的偏移量：目标左上角 - 当前元素左上角
    const moveX = targetRect.left - boxRect.left;
    const moveY = targetRect.top - boxRect.top;
    
    // 执行动画，记得设置transformOrigin让偏移基于左上角计算
    await animate(boxRef.current, { 
      x: moveX, 
      y: moveY 
    }, { duration: 0.6 });
  };

  return (
    <div style={{ position: "relative", minHeight: "500px" }}>
      <div 
        ref={boxRef}
        onClick={handleClick}
        style={{ 
          position: "absolute", 
          width: "80px", 
          height: "80px", 
          background: "#2563eb",
          transformOrigin: "top left" // 关键：让偏移计算更直观
        }}
      />
      <div 
        ref={targetRef}
        style={{ 
          position: "absolute", 
          left: "300px", 
          top: "200px", 
          width: "80px", 
          height: "80px", 
          border: "2px dashed #999"
        }}
      />
    </div>
  );
}

方法2：用motion组件的状态驱动动画（更推荐） #

直接用Framer Motion的<motion.div>，通过React状态控制目标位置，不用手动调用animate()，更符合React逻辑：

import { motion } from "framer-motion";
import { useState } from "react";

function MovingBox() {
  // 用状态存目标位置，初始可以设为0或任意值
  const [targetPos, setTargetPos] = useState({ x: 0, y: 0 });

  const handleClick = () => {
    // 直接设置目标坐标，比如移动到屏幕右下角区域
    setTargetPos({ x: window.innerWidth - 100, y: window.innerHeight - 100 });
  };

  return (
    <motion.div
      initial={{ x: 0, y: 0 }}
      animate={targetPos}
      transition={{ duration: 0.5, type: "spring" }}
      style={{ 
        position: "fixed", 
        width: "80px", 
        height: "80px", 
        background: "#2563eb",
        transformOrigin: "top left"
      }}
      onClick={handleClick}
    />
  );
}

关键注意事项 #

• transformOrigin：默认元素的变换原点是中心，x/y偏移会基于中心计算，想要精准对应坐标，记得设置transformOrigin: "top left"。
• 定位方式：要让元素自由移动，必须给元素加position: absolute或fixed，脱离文档流才不会影响其他布局。
• 动态目标：如果目标位置是动态变化的（比如窗口 resize），可以监听resize事件更新目标坐标，结合状态重新触发动画。

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