Framer Motion useSpring实现鼠标移动背景渐变动画失效问题

核心问题分析 #

你遇到的问题根源在于：普通状态变量无法触发Framer Motion的响应式更新，或者没有将渐变样式正确绑定到motion组件的响应式值上。虽然控制台能看到x/y值变化，但组件样式没有同步更新。

解决方案代码 #

直接替换为以下实现逻辑，关键是用Framer Motion的useMotionValue、useSpring和useTransform构建响应式链路：

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

const GradientBackground = () => {
  // 存储原始鼠标位置的响应式值
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  // 给鼠标位置添加弹簧缓动效果，可调整参数优化手感
  const springX = useSpring(mouseX, { stiffness: 250, damping: 25 });
  const springY = useSpring(mouseY, { stiffness: 250, damping: 25 });

  // 将缓动后的数值转换为渐变需要的百分比格式
  const gradientX = useTransform(springX, val => `${val}%`);
  const gradientY = useTransform(springY, val => `${val}%`);

  const handleMouseMove = (e: MouseEvent) => {
    // 计算鼠标在视口中的百分比位置
    const xPercent = (e.clientX / window.innerWidth) * 100;
    const yPercent = (e.clientY / window.innerHeight) * 100;
    // 更新原始motion值，spring会自动处理缓动
    mouseX.set(xPercent);
    mouseY.set(yPercent);
  };

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  return (
    <motion.div
      className="fixed inset-0"
      style={{
        background: `radial-gradient(circle at ${gradientX} ${gradientY}, #6366f1, #8b5cf6, #ec4899)`
      }}
    />
  );
};

export default GradientBackground;

关键修复点 #

• 用useMotionValue替代普通状态：这是Framer Motion的响应式基础，motion组件能自动监听其变化并更新样式，无需手动触发重渲染。
• useSpring处理缓动：直接基于motion值创建弹簧动画，避免手动计算缓动值的繁琐，参数stiffness（刚度）和damping（阻尼）可根据需求调整，数值越大手感越硬。
• useTransform适配样式格式：将数值转换为渐变需要的百分比字符串，直接绑定到background样式中，确保样式能响应motion值变化。
• 使用motion.div而非普通div：只有motion组件能识别并响应内部的motion值变化，普通div无法触发样式更新。

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