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 包含一个带有灰色 #B9BBBE 的简单 SVG Emoji，我也在 initial 道具中使用了这种颜色。

我需要从那个过渡到黄色 #FFCC4D，但是当我离开图标时，它从黄色过渡回蓝色阴影，然后是初始灰色。

我不知道如何从黄色直接过渡到灰色，中间没有任何奇怪的颜色。

我也试过如下传递一个数组，但仍然得到相同的结果:

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

Answer 1

我想刚度会导致这种颜色“反弹”：

A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.

所以你需要为 scale 属性应用 spring 和刚度以获得弹跳效果，并保持颜色不变：

      <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>

Codesandbox

React Framer Motion 中间颜色过渡

React Framer Motion in-between color transition

css

reactjs

framer-motion