HTML5 请求动画帧答案

【问题标题】：HTML5 requestanimation frameHTML5 请求动画帧
【发布时间】：2012-12-27 04:54:56
【问题描述】：

所以我使用 requestAnimationFrame 编写了一个基本游戏。它重绘画布并监听键盘输入并相应地以像素/秒移动播放器。我的问题是，给定一个包含 9 帧的精灵表，我如何在玩家行走时创建这个动画？基本上 if(walking){ 以给定的速率循环遍历这九帧}。我了解游戏循环的工作原理，但不了解如何为精灵表设置动画。

【问题讨论】：

好吧，照你说的做。在行走时将标志设置为 true，在停止行走时设置为 false（可能在 keydown/keyup 或更智能的逻辑中），然后在游戏循环中使用您的 if (walking) 逻辑。
你的玩家或你的步行序列对象应该包含一个next() 函数，以便在每一步中，要绘制的实际图像由某个事件调用的“下一个”函数推进。
谢谢！我现在就试试这个。
我认为，如果您发布一些代码，人们会比 cmets 更倾向于添加（有用/正确）答案。

标签： javascript html animation canvas sprite

【解决方案1】：

那里有动画本身的库，但你自己很容易。

您需要使用 drawImage：

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

假设精灵表是水平格式的：

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

只需根据您希望逐步完成动画的节拍数或秒数更新帧。可以采用 cmets 中建议的任何方式。

模数函数将frame 保持在界限内：

frame = frame % numberOfFrames;

我更喜欢只制作一个动画精灵类并使用它。它更有趣。这就是它如何工作的基础。希望对您有所帮助。

【讨论】：