SVG cursor 與不同形狀元素 hover

Question

我正在嘗試從這個答案https://stackoverflow.com/a/67420648/7942242實現代碼，這是一個有機運動的圓圈。

問題是，它只能在元素懸停時移動。

因此，在mouseover時，我調用 function 以使用參數進行移動，並且出路相同。

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

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

更新 my 形狀的update_blob ，每 20 秒調用一次，如setInterval(() => update_blob(bool), 20)

使用來自父 function 參數的變量bool ( handleHover(false / true); )

但我不明白為什么它會卡住。 我已經嘗試了很多方法讓它正常工作，沒有 boolean 我不知道如何實現我的目標。

似乎 SVG 有兩個 state 有時動畫而不是同時。

關於如何僅在 hover 上制作 animation 的任何想法？

在下面找到一個完整的代碼框⬇️

https://codesandbox.io/s/bold-cdn-yuddw

恢復我的問題

我想得到這個，但只有當我 hover 我的元素時。 當它沒有懸停時，它應該是一個不會移動的簡單圓圈。

Answer 1

當您設置間隔時，您應該提供一個 function 來調用每個“滴答”，而是提供函數調用的結果：

setInterval(update_blob(bool), 20);

應該是：

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

這將為您解決問題。 但是，我可以建議您重寫 function 以改用requestAnimationFrame嗎？ 使用 setInterval，如果瀏覽器處於負載狀態，您的 function 可能會超過 20 毫秒的間隔，疊加多次計算，進一步增加設備的負載......使用 requestAnimationFrame，您有時間在瀏覽器認為有時間運行 function時間給你，在你的計算結束時，你調用下一幀，一個更安全的練習......