I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery.
I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded.
My problem, is that I don't know how to do that...
I was thinking, because my sprite names are incremental like:
mariohammerswing1.png
mariohammerswing2.png
mariohammerswing3.png
etc.
So, if we could somehow increment this until we reached the last instance, which in this case is mariohammerswing5.png
it will loop back to the beginning.
If I can figure out that part, I'm ready to go! :)
Any suggestions?
I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery.
I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded.
My problem, is that I don't know how to do that...
I was thinking, because my sprite names are incremental like:
mariohammerswing1.png
mariohammerswing2.png
mariohammerswing3.png
etc.
So, if we could somehow increment this until we reached the last instance, which in this case is mariohammerswing5.png
it will loop back to the beginning.
If I can figure out that part, I'm ready to go! :)
Any suggestions?
Share Improve this question edited Aug 7, 2010 at 4:22 Gert Grenander 17.1k6 gold badges41 silver badges43 bronze badges asked Aug 7, 2010 at 4:07 QQ 19.2k29 gold badges91 silver badges113 bronze badges 3- I think "sprites" usually indicate you have multiple frames on one image, in which case, all you'd have to do is pan the image. But anyway, why don't you just use an animated gif? Or do you want higher quality images? Flash is another option. – mpen Commented Aug 7, 2010 at 4:25
- @Mark: Maybe he wants to be able to start and stop the animation at will. – Deniz Dogan Commented Aug 12, 2010 at 10:25
- Animated gifs are garbage. 256 colours? Why are we still even using them? – devios1 Commented Apr 12, 2012 at 18:47
2 Answers
Reset to default 5There's a sprite-dedicated plugin for jquery
http://www.spritely/
Take a look ;)
Untested, but something like this:
var images = ['one.png', 'two.png', 'three.ng'];
function startAnim() {
var $target = $('#something');
var counter = 0;
setTimeout(function () {
$target.css('background-image', images[counter]);
if (++counter > images.length - 1)
counter = 0;
}, 83);
}
startAnim();
You could probably apply some trickery with %
(modulo) somehow, but I think it's easier to read this way.