0

所以，我在弄清楚如何暂停和（最重要的是）取消暂停我的模拟时遇到了问题。当我按下播放键时，我调用了一个名为 animate() 的函数。我只调用一次，所以在animate()内部我很自然地调用requestAnimationFrame(animate)让它像往常一样循环：

    function animate() {
        idAnimate = requestAnimationFrame(animate);
        
        (...more code...)
    }

请注意，我将返回归因于idAnimate，因此我可以在需要的任何地方将其用作cancelAnimationFrame(idAnimate)的参数。我的问题是，一旦我能够停止动画，我就无法将其取消暂停。我已经搜索了替代方案，例如使用诸如isPaused 之类的布尔变量，并且仅在isPaused为假时调用requestAnimationFrame，但据我所知，当isPaused 变为真时，动画循环停止并且它无法再测试它是否为真。我只调用一次animate()，所以一旦它退出循环，它就不再进入它。无论我如何暂停它（通过使isPausedtrue 或从外部调用cancelAnimationFrame(idAnimate)），我似乎无法让它回去。

我很想对此有所了解。我希望我能把自己说清楚。先感谢您！:)

4

1 回答 1

0

解决方案之一。

你有像 isRunning 这样的标志变量。

当您开始时，您将 isRunning 设置为 true。当您停止时，您设置运行为假并中断循环。在循环结束时，您再次通过 requestAnimationFrame 调用它。循环函数调用附加函数动画下一步动画。

let isRunning = false

function loop(){
  if(!isRunning)
    return
  setNextColor();
  requestAnimationFrame(loop)
}

function start(){
  isRunning = true
  loop();
}

function stop(){
  isRunning = false
}


let hue = 0
const box = document.getElementById("box")
function setNextColor(){
  hue++
  box.style.backgroundColor = `hsl(${hue},100%,30%)`;
}
<div id="box">
<button onclick="start()">start</button>
<button onclick="stop()">stop</button>

于 2021-06-25T21:44:29.587 回答