Search the Community

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?

Some days ago I've started developing an animated odometer written in HTML and javascript, which I intend to use on a rpg game that I am developing. Right now, I am facing a problem regarding the animation. The description of the problem as well as the source code can be found here: http://stackoverflow.com/questions/35615811/odometer-animation-using-pixi-js