1

So, I'm having an issue with figuring out how to pause and (most importantly) unpause my simulation. When I press play, I call a function called animate(). I only call it once, so naturally inside animate() I call requestAnimationFrame(animate) for it to loop as usual:

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

Note that I'm attibuting the return to idAnimate so I can use it as argument for cancelAnimationFrame(idAnimate) wherever I need it. My problem is that, once I'm able to stop the animation, I cannot unpause it back. I've searched for alternatives, like using a boolean variable like isPaused and only calling requestAnimationFrame when isPaused is false, but as far as I understand when isPaused becames true the animation loop stops and it can no longer test if it's true or not. I only call animate() once, so once it's out of the loop it no longer enters it. No matter how I pause it (either by making isPaused true or calling externally cancelAnimationFrame(idAnimate)), I can't seem to make it go back.

I'd love some insight on this. I hope I was able to make myself clear. Thank you in advance! :)

Pedro Heck
  • 59
  • 3
  • If by any chance you didn't solve this already and Robert's answer below doesn't make that clear, to "unpause" the animation, you simply have to run your `animate()` function again - it's as simple as that. Assuming you have everything set up properly, including your `isPaused` variable, that is. Of course, if you want to "resume" your animation from where it was left after it was paused and you have a [clock.getDelta()](https://threejs.org/docs/#api/en/core/Clock) based animation system, you'd have to call the latter again to reset it, otherwise it'll count the paused period as an active one. – Yin Cognyto May 17 '22 at 17:48

2 Answers2

3

One of solution.

You have flag variable like isRunning.

When you start then you set isRunning to true. When you stop you set is running to false and break loop. On the end of loop you call it by requestAnimationFrame again. Loop function call additionaly function animating next step of animation.

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>
Robert
  • 2,538
  • 1
  • 9
  • 17
0

The reason he is having trouble with this and why other answers will not work for him, is that all his code is inside the loop. Which means that once the loop stops, it can't check again for the unpause.

The way to do it is to then run the loop again through another mean, like through a click event. I.e. once the player clicks the screen, call the loop again

addEventListener("mousedown", function (event) {
    if (isPaused){
        animate()
    }
});
Bruno Mussoi Mendonça
  • 3
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 27 '23 at 17:15