HTML5 Canvas Tileset动画

时间:2012-06-10 21:16:58

标签: javascript html5 canvas

如何在HTML5 canvas中进行图像动画制作?

我现在有这个代码:http://jsfiddle.net/WnjB6/1/

在这里,我可以添加类似的动画 - > Animation.add('stand', [0, 1, 2, 3, 4, 5]);

但是如何播放这个动画?我的图像绘制功能是 - > drawTile(canvasX, canvasY, tile, tileWidth, tileHeight);

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

我需要像运行时一样动画Animation.play('stand')从'stand'数组运行动画。

我试着这样做,有一天,但没有更多的想法如何。 :(

感谢并抱歉我的英语不好。

1 个答案:

答案 0 :(得分:1)

这里你去!

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

我添加了你需要跟踪简单动画的所有状态,我还添加了一种重复播放动画的方法。

不是让动画重复,你可能想要这样做,所以总是有一个“默认”动画循环在运行并且动画启动会中断它。

如果您希望“站立”一直玩,然后“攻击”或发生某些事情,那么这将非常有用,然后在“攻击”完成时返回“站立”。 但那是另一天!