如何用Framer Motion的useScroll实现滚动进度条颜色动画？

你的问题出在两个核心点：一是用hue.get()获取静态值无法驱动动态动画，二是颜色生成函数的参数处理错误。以下是两种可行的解决方案：

方案1：直接映射滚动进度到完整颜色值 #

利用useTransform直接将滚动进度映射到目标颜色区间，Framer Motion会自动处理颜色的平滑过渡：

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

function YourComponent() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 200,
    damping: 50
  });
  // 将滚动进度[0,1]直接映射到两个目标HSL颜色
  const progressColor = useTransform(
    scrollYProgress,
    [0, 1],
    ["hsl(216, 100%, 50%)", "hsl(156, 100%, 50%)"]
  );

  return (
    <motion.div 
      id="navbar-progress" 
      style={{
        scaleX: scaleX,
        backgroundColor: progressColor // 直接传入MotionValue，自动触发动画
      }}
    />
  );
}

方案2：基于色相值生成动态颜色 #

如果需要单独处理色相的转换逻辑，可以先映射色相值，再通过useTransform生成完整的颜色字符串：

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

function YourComponent() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 200,
    damping: 50
  });
  const hue = useTransform(scrollYProgress, [0, 1], [216, 156]);
  // 将色相MotionValue转换为完整的HSL颜色字符串
  const progressColor = useTransform(hue, (currentHue) => 
    `hsl(${currentHue}, 100%, 50%)`
  );

  return (
    <motion.div 
      id="navbar-progress" 
      style={{
        scaleX: scaleX,
        backgroundColor: progressColor
      }}
    />
  );
}

错误原因说明 #

1. hue.get()的局限性：get()只能获取MotionValue的当前静态值，无法让Framer Motion监听其实时变化并驱动动画，导致颜色无法随滚动同步更新。
2. 颜色函数参数错误：你定义的progressBarColor({ hue })期望接收含hue属性的对象，但调用时传入的是hue.get()返回的数字，因此函数内的hue会是undefined，最终生成无效的颜色值hsl(undefined, 100%, 50%)。

另外，无需使用animate属性，直接将MotionValue放入style中即可，Framer Motion会自动处理动画逻辑。

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