Question

我正在尝试使用线性渐变为SVG设置动画，并且在其持续时间方面有些挣扎。因此，这里的合理性是我有2种不同的颜色（渐变色），并且在悬停父组件时，我开始或停止了动画处理。

<linearGradient id="prefix__d" x1="95.55%" x2="6.387%" y1="50%" y2="50%">
   <stop offset="0%" stopColor="#0975E0" >
      <animate id="a1" attributeName="stop-color" values="#0975E0; #114BD5" begin="0; a2.end" dur={animationSpeed} />
      <animate id="a2" attributeName="stop-color" values="#114BD5; #0975E0" begin="a1.end" dur={animationSpeed} />
   </stop>
   <stop offset="100%" stopColor="#114BD5" >
     <animate id="a3" attributeName="stop-color" values="#114BD5; #0975E0" begin="0; a4.end" dur={animationSpeed} />
       <animate id="a4" attributeName="stop-color" values="#0975E0; #114BD5" begin="a3.end" dur={animationSpeed} />
   </stop>
 </linearGradient>

初始动画速度为0，因为我只想在用户将鼠标悬停在我的按钮上时对其进行动画处理。

const [hoverSpeed, setHoverSpeed] =  useState('0');

我正在这里更改值

<Element 
    id={id}
    href={href}
    target={target}
    onMouseEnter={() => setHoverSpeed('1s')}
    onMouseLeave={() => setHoverSpeed('0')}
    data-speed={hoverSpeed} // just for debugging
  >

问题是，似乎没有从初始值“重新渲染”动画。我尝试做相反的事情，从“ 1s”开始到更改为0，这也没有停止动画。

我如何实现类似的目标？

谢谢。

更新

我尝试了另一种无效的方法。我可能执行错误。我为动画持续时间设置了一个固定值，并且为动画标签设置了条件渲染。

const [active, setActive] =  useState(false);

onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}

{active && (
   <>
      <animate id="a1" attributeName="stop-color" values="#0975E0; #114BD5" begin="0; a2.end" dur='1s' />
      <animate id="a2" attributeName="stop-color" values="#114BD5; #0975E0" begin="a1.end" dur='1s' />
   </>
)}

SVG悬停时更改动画持续时间

0 个答案: