Javascript HTML5请求动画帧

所以我用requestAnimationFrame写了一个基本的游戏。它会重新绘制画布，监听键盘输入，并相应地以像素/秒为单位移动播放器。我的问题是，给定一个包含9帧的精灵表，如何在玩家行走时创建此动画？基本上如果（步行）{以给定的速率循环通过这九帧}。我了解游戏循环是如何工作的，只是不知道如何制作精灵表的动画。

动画本身有很多库，但是你自己做就足够简单了

您需要使用drawImage：

ctx.drawImage(image, sx, sy, sw, sh);

假设精灵图纸为水平格式：

var frame = 0;
ctx.drawImage(image, startX+(spriteWidth*frame), startYy, spriteWidth, spriteHeight);

只需按您希望在动画中单步执行的滴答声或秒数更新帧。这可以是评论中建议的任何方式

模函数将保持

帧

在边界内：

frame = frame % numberOfFrames;

---

我更喜欢制作一个动画精灵类并使用它。它更有趣。这是它工作原理的基础。希望能有帮助。

好吧，照你说的做。当它行走时将标志设置为

true

，当它停止行走时将标志设置为false（可能在

keydown

/

keydup

或一些更智能的逻辑中），然后在游戏循环中使用

if（walking）

逻辑。你的玩家或行走序列对象应该包含

next（）

函数，以便在每一步，要绘制的实际图像由某个事件调用的“下一步”函数进行推进。谢谢！我现在就试试。我想如果你发布一些代码，人们会更倾向于添加（有用/正确的）答案而不是评论。