Question

How to do in HTML5 canvas Image animating?

I am have this code now: http://jsfiddle.net/WnjB6/1/

In here I am can add animations something like -> Animation.add('stand', [0, 1, 2, 3, 4, 5]);

But how to play this animation? My image drawing function is -> drawTile(canvasX, canvasY, tile, tileWidth, tileHeight);

Animation['stand']; return 0, 1, 2, 3, 4, 5

I am need something like when I am run Animation.play(‘stand’) run animation from ‘stand’ array.

I am try to do this something like one day, but no have more idea how. 🙁

Thanks and sorry for my bad English language.

Answer 1

Here ya go!

http://jsfiddle.net/WnjB6/5/

I added all the state you’ll need to keep track of simple animations, and I also added a way to make an animation repeating.

Instead of making an animation repeating, you might want to make it so there’s always a “default” animation cycle running and having an animation start interrupts it.

That would be useful if you want ‘stand’ to play all of the time and then ‘attack’ or something to happen, then go back to ‘stand’ when ‘attack’ is done.
But that’s for another day!