Javascript 如何使用React Spring在一个元素上连接两个动画？

我想创建一个按钮，它将每2秒触发一次，并将其比例从1更改为1.5，并且在同一元素上有第二个动画，但只有当您将鼠标放在它上面时。我的问题是我不知道如何连接这两个

useSpring

hook

我的悬停动画：

  const buttonAnimation = useSpring({
    backgroundColor: !isVisible ? '#4b1220' : '#fff',
  });

我想应用第二个动画

const buttonInfAnimation = useSpring({
    from: {
      scale: 1,
    },
    to: {
      scale: 1.5,
    },
  });

当我这样称呼它时，我只得到代码中的最新动画：

<animated.button
  style={{...buttonInfAnimation, ...buttonAnimation}}
  onMouseLeave={() => setVisibility(false)}
  onMouseEnter={() => setVisibility(true)}
  className="hover"
></animated.button>

---

您不必创建两个单独的spring动画。你可以把它们结合起来。对于缩放，您必须使用TransformCSS属性

const按钮nFanimation=useSpring({
发件人：{
变换：“比例（1）”，
},
致：{
变换：“比例（1.5）”，
背景颜色：！是否可见？#4b1220'：#fff'，
},
});
我想问的是：一个悬停动画和第二个单击动画，两个不同的听众我理解这个问题，但它只在一个动画中起作用。