DEV Community

Animating Sprite Sheets With JavaScript

Martin Himmel on July 01, 2018

Let's look at animating a sprite sheet, on an HTML5 canvas, using JavaScript. A Little Setup First, let's create the canvas element. ...

Read full post

Adam • Jul 2 '18

Yes, Marty!

I literally started building something yesterday and needed to use sprite sheets but I got a bit stuck and just decided to animate a round div instead! Lol

This is literally gold for me right now, man! Thanks for writing this up!

If I get this finished I'll show you the final product!

Thanks again! ✌🏻😁

Martin Himmel • Jul 2 '18

Glad I could help! I look forward to seeing your project!

deedee resists! • Oct 7 '18

Great tut Martin. Am just learning.
Can I ask... how to stop the looping? Say you want the animation to complete only one cycle?

Martin Himmel • Oct 8 '18

requestAnimationFrame returns a long integer. If you assign that to a variable, you can then call cancelAnimationFrame(id) once the required condition is met to stop the cycle.

Using the step function as an example, something like this:

let animationFrameId;

function step() {
    if (animationFrameId && conditionToStopCycle) {
        window.cancelAnimationFrame(animationFrameId);
        return;
    }
    // rest of the code
    animationFrameId = window.requestAnimationFrame(step);
}

Another way could be to return early to break out of the step function. If only one cycle is needed, once the counter reaches the end of the array, return before calling the next requestAnimationFrame (instead of reseting the counter to 0 and continuing).

Here are the MDN pages for requestAnimationFrame and cancelAnimationFrame.