React Framer Motion 中間顏色過渡

Question

我正在使用framer-motion在懸停時為Icon組件設置動畫，如下所示：

<Icon
    initial={{ scale: 1, color: "#B9BBBE" }}
    whileHover={{
        scale: 1.15,
        color: "#FFCC4D",
    }}
    transition={{ type: "spring", stiffness: 500 }}
>
    <Emoji />
</Icon>

Icon包含一個簡單的 SVG Emoji ，帶有灰色#B9BBBE ，我也在initial道具中使用了這種顏色。

我需要從那個過渡到黃色#FFCC4D ，但是當我移出圖標時，它從黃色過渡回藍色陰影，然后是初始灰色。

我不知道如何從黃色直接過渡到灰色，中間沒有任何奇怪的顏色。

我也嘗試按如下方式傳遞數組，但仍然得到相同的結果：

whileHover={{
    scale: 1.15,
    color: ["#B9BBBE", "#FFCC4D"],
}}

Answer 1

我猜剛度會產生這種顏色“反彈”：

彈簧的剛度決定了彈簧的速度以及在彈簧穩定和動畫結束之前彈簧將反彈的次數。

所以你只需要為反彈效果的scale屬性應用彈簧和剛度，並保持顏色不變：

      <motion.div
        style={{ height: 100, width: 100 }}
        initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
        whileHover={{
          scale: 1.15,
          backgroundColor: '#FFCC4D'
        }}
        transition={{ scale: { type: 'spring', stiffness: 500 } }}
      ></motion.div>

代碼沙盒