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

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 4800×624. 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!