Framer Motion图标悬停颜色回退出现异常中间蓝问题求助

问题原因 #

framer-motion 默认使用 RGB 色彩空间做颜色过渡插值，低饱和度灰色 #B9BBBE 到暖黄色 #FFCC4D 的 RGB 插值路径会经过高饱和度冷色调区间，就是你看到的异常蓝色中间色。你之前用数组定义关键帧的方案没有生效，是因为数组只控制了起止色值，插值逻辑还是默认的 RGB 空间。

解决方案 #

给颜色属性单独配置过渡规则，指定使用 HSL/HSV 色彩空间做插值即可解决，修改后的完整代码如下：

<Icon
    initial={{ scale: 1, color: "#B9BBBE" }}
    whileHover={{
        scale: 1.15,
        color: "#FFCC4D",
    }}
    transition={{
        // 保留原有缩放的弹簧动画配置
        scale: { type: "spring", stiffness: 500 },
        // 单独为颜色过渡指定HSL色彩空间，避免异常中间色
        color: { type: "tween", duration: 0.2, colorSpace: "hsl" }
    }}
>
    <Emoji />
</Icon>

如果需要和弹簧动画的时长对齐，可以调整 duration 参数，也可以把 colorSpace 直接写到全局 transition 配置里，所有颜色过渡都会生效：

transition={{ type: "spring", stiffness: 500, colorSpace: "hsl" }}

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