Stutter when animating / moving sprite with JavaScript

Question

I'm attempting to create an animation by moving a sprite image across a div. The sprite image contains each frame of the animation. The size of the "canvas" is 600px by 624px. Each frame on the sprite sheet is positioned every 600px and I'm moving the image 600px at a time.

Here is what I have so far... voyced.com/crownacre/www/demo/sprite.html

I'm using the following JavaScript to move the image across the screen...

(function myLoop(i) {
    setTimeout(function() {
        defImg.css({
            right: '-=600'
        });
        if(--i) myLoop(i); //  decrement i and call myLoop again if i > 0
    }, 60) // delay ms
})(114); // number of frames in the sprite

I've used several sprites all floated left as the total width of sprite sheets in 69000px, which causes even more issues if I use just one image! Hence why I have 4 at the moment.

So... The problem I am having is that the animation pauses briefly several times. It seems fine in Firefox (for me), but you notice it in Chrome and you can't miss it in IE.

It also always stutters every 16200px, making me think this is related to moving 1 sprite into the next on the screen.

Ideas please people?

Thanks in advance!

Answer 1

Have you tried using a sprite animation plugin?

http://www.spritely.net/

Does what you want, seems to run well on their demo.

Answer 2

Let me first say: The huge images you're trying to display as a sprite isn't exactly what sprites/animations are used for. You can better look into a real <canvas> solution (especially when looking at your animation), but that would require some more complex JavaScript skills.

Anyway, the problem with the stutter is because you're using several images that are all float ed to the left , and position the slider with the right property. Each time another image needs to be displayed, a stutter can be noticed. This might have something to do with the browser engine, needing to paint the actual image (which is hard, since they're pretty big).

So, instead of using several images, you could also use one (take note, you might want to make this a .JPG or .GIF since they tend to be more compact than .PNG ) and use actual CSS sprites with background-position .

Here's an example that uses your code, and one single image . Good luck!

Answer 3

Thanks again for the feedback guys. I used a combination of your tips that have helped me solve the issue I was having.

1. Spritely has helped immensely. Essentially it is doing the same as what @marcoK suggested, and adjusting the background-position property. This plugin also provides a fool proof way of controlling each frame of the sprite, as well as creating callbacks when it reaches a specified frame - awesome!

2. The other issue was the huge sprite. Mobile safari won't allow anything larger than 3MP so the max size I could make the image was 4800x624. I have 15 of these each as a separate animation that calls the next when it reaches the last frame. I was very sceptical about this working smoothly, but it does, and in all browsers.

I'm not overly happy with the number of request it makes but after optimising the pngs the file size isn't too bad if I add a pre-loader.

Really pleased with the outcome... http://www.crownacre.voyced.com/ and one more reason not to use Flash!