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

问题描述

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

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

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

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

解决方法

解决方案之一。

你有像 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>