javascript - 动画 javascript 框架

Question

我想在 html Canvas 中为只有 4 帧的精灵设置动画。我遇到了如下方法。来自 AS3 和 c# 背景，我真的不喜欢下面的代码，因为它很复杂。我会在这里待上几个小时，试图解决这个代码。有没有更简单的方法来为几帧设置动画，或者 JS 只是有点“旧”。

http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/

Answer 1

这可能对您有所帮助：http ://creativejs.com/2012/01/day-11-sprite-sheets/

它基本上是一个每 x 毫秒调用一次的循环，清除画布并从序列中绘制新图像

Answer 2

看看这个库http://www.spritely.net/documentation/，它很容易使用，这里是一个例子

http://jsfiddle.net/VxMwN/

$('#bird')
    .sprite({
    fps: 9,
    no_of_frames: 3
})
    .spRandom({
    top: 50,
    bottom: 200,
    left: 300,
    right: 320
});