如何使用 requestAnimationFrame 暂停和取消暂停

Question

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

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

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

我希望对此有一些见解。我希望我能够说清楚。先感谢您！ :)

Answer 1

解决方案之一。

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

启动后，将 isRunning 设置为 true。当你停止时，你将运行设置为 false 并中断循环。在循环结束时，您再次通过 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>

Answer 2

他在这方面遇到麻烦以及其他答案对他不起作用的原因是他的所有代码都在循环内。这意味着一旦循环停止，它就无法再次检查是否取消暂停。

执行此操作的方法是通过另一种方式再次运行循环，例如通过单击事件。 IE。一旦玩家点击屏幕，再次调用循环