具有不同形状元素的 SVG 光标悬停 [英] SVG cursor with different shape elements hover

问题描述

我正在尝试实现此答案中的代码 https://stackoverflow.com/a/67420648/7942242是一个有机运动的圆圈.

I am trying to implement code from this answer https://stackoverflow.com/a/67420648/7942242 which is a circle with organic mouvement.

问题是，只有在元素悬停时它才必须移动.

The thing is that, it must move only when elements are hovered.

所以在 mouseover 上我调用函数来使带有参数的移动和出路相同.

So on mouseover I call the function to make the movement with a parameter and the same the way out.

 querySelect[i].addEventListener("mouseover", () => {
        handleHover(true);
      });

  querySelect[i].addEventListener("mouseout", () => {
    handleHover(false);
  });

更新 my 形状的函数是 update_blob，它每 20 秒调用一次，就像这样 setInterval(() => update_blob(bool), 20)

The function that updates the shape of my is update_blob which is called every 20 sec like so setInterval(() => update_blob(bool), 20)

使用来自父函数参数的变量 bool (handleHover(false/true);)

With the variable bool from a parameter on the parent function (handleHover(false / true);)

但我不明白为什么它会卡住.我尝试了很多方法让它正常工作，如果没有布尔值，我不知道如何实现我的目标.

But I don't get why it get stuck. I've tried many ways to make it work correctly and without boolean I don't see how I could achieve my goal.

似乎 SVG 有两种状态，有时是动画的，不是同时动画的.

It seems like the SVG has two state sometime animated and not at the same time.

有没有想过如何只在悬停时制作动画?

Any thought on how to make the animation only on the hover ?

在下面找到一个完整的代码和盒子⬇️

Find a full codesandbox bellow ⬇️

https://codesandbox.io/s/粗体-cdn-yuddw

我想获得这个，但仅当我将鼠标悬停在我的元素上时.当它不悬停时，它应该是一个不移动的简单圆圈.

I want to get this, but only when I hover my element. When it is not hovered it should be a simple circle that does not move.

推荐答案

当你设置间隔时，你应该提供一个函数来调用每个'tick'，而是提供一个函数调用的结果:

When you set the interval, you're supposed to provide a function to call on each 'tick', you instead provide the outcome of a function-call:

setInterval(update_blob(bool), 20);

应该是:

setInterval(() => update_blob(bool), 20);

这将为您解决.但是，我可以建议您重写该函数以使用 requestAnimationFrame 代替吗?使用 setInterval，如果浏览器处于负载之下，您的函数可能会超过 20 毫秒的间隔，堆积多个计算，进一步增加设备的负载......使用 requestAnimationFrame，只要浏览器认为有时间，您就有时间运行您的函数，并在计算结束时调用下一帧，这是一种更安全的做法...

This will fix it for you. However, may I recommend you rewrite the function to use requestAnimationFrame instead? With setInterval, should the browser be under load, your function might exceed the 20ms interval, stacking up multiple calculations, further increasing the load of the device... Using requestAnimationFrame you get time to run your function as soon as the browser deems it has time for you, and at the end of your calculation, you call the next frame, a much safer practice...

这篇关于具有不同形状元素的 SVG 光标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！