How break from requestAnimationFrame() method

[bruserker]

I am programming an animated odometer which I intend to use on a game of mine, but I am having some trouble on designing a good animation loop. I am using Pixi and right now I am debugging it on the browser.

As soon as the html page is loaded, an initialization method is executed, which creates a container and a renderer which shall load the relevant images, as well as loading the actual and desired/new values of the odometer. Afterwards, the difference between these 2 values is calculated, and if it is different than zero, it should move some tiles on a specific frequency and update this difference of values based on the same frequency.

Here is how the method which I call on window.requestAnimatedFrame() method:

function update(){

if(differenceOfValues != 0){

moveTiles(frequency);

updateDifferenceOfValues(frequency);

}

else { //difference is now zero, so the animation should stop

    renderer.render(container);

    window.requestAnimationFrame(update); //updates before cancelling the animation

  if (requestId) { //my failed attempt on cancelling the animation :(
     window.cancelAnimationFrame(requestId);
     requestId = undefined;
   }

}

    requestId = window.requestAnimationFrame(update);

      renderer.render(container);

      window.requestAnimationFrame(update);

}

 

All the calculations and movements are performed correctly, however my main problem is on the update() method. In other words, I can't figure out a way of breaking out from it. I would like to snap out of it completely, so I could trigger some button events, like changing the desired/new value while the odometer is still moving, or setting the difference of values to zero, so the tiles position remain on their place, for instance (I can't click buttons or interact with the browser page because the program gets closed inside the update() method, even when there aren't any calculations to perform.)

Anyway, is there a way to "break" this loop execution?

 

[mattstyles]

Easiest way to break the loop is to not call `requestAnimationFrame` again, based on some exit criteria.

function update() {
  console.log( performance.now() )
  
  var exit = Math.random() > 0.9

  if ( !exit ) {
    requestAnimationFrame( update )
  }
}

update()

We have a simple exit condition that fires about 10% of the time, if it is false then we continue to call the function again when the animationFrame is ready, otherwise we simply do not call it and the loop finishes.

You can use cancelAnimationFrame if you like but it will involve creating an additional variable to keep track. requestAnimationFrame returns an id which can be used by cancelAnimationFrame.

var raf = null

function update() {
  console.log( performance.now() )

  var exit = Math.random() > .9

  raf = requestAnimationFrame( update )

  if ( exit ) {
    cancelAnimationFrame( raf )
  }
}

update()

In this terse example using cancelAnimationFrame makes no sense but you might find a use case for it.

In your example you are calling requestAnimationFrame more than once anyway, which will probably result in some unexpected behaviour.

[themoonrat]

Or you could use a PIXI ticker and just call stop & start on it. The PIXI ticker uses rAF in the background

http://pixijs.github.io/docs/PIXI.ticker.html