requestAnimationFrame()似乎不起作用。

Question

我有这段代码，它有点工作，但不是真的，这是我的代码。

var c = document.getElementById ("screen");
var ctx = c.getContext ("2d");

var characterX = 0;
var characterY = 0;
var srcX;
var srcY;
var sheetHeight = 280;
var sheetWidth = 864;
var frameCount = 8;
var cols = 8;
var rows = 2;
var character = new Image;
character.src = "spritesheet.png";
var width = sheetWidth / cols;
var height = sheetHeight / rows;
var currentFrame = 0;

function updateFrame() {
    currentFrame = ++currentFrame % cols;
    srcX = currentFrame * width;
    srcY = 0;
}

function drawCharacter() {
    ctx.clearRect (0, 0, c.width, c.height);
    updateFrame();
    ctx.drawImage (character, srcX, srcY, width, height, characterX, characterY, width, height)
}

setInterval (function() {
    drawCharacter();
}, 100);

function draw() {

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

基本上当我运行这段代码的时候 字符就被立即画出来了 我不明白，因为我还没有在draw();中调用drawCharacter();，所以它不应该显示字符。如果我这样写

function draw() {
    drawCharacter();

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

然后，由于某些原因，setInterval不再工作，导致Characther运行得太快，有人能帮我解决这个问题吗？

Answer 1

在第一个版本中，你的字符是直接画出来的，而不是因为有了 draw 功能或 requestAnimationFrame但由于 setInterval每100ms重绘一次你的角色。

在第二个版本中，你的角色更新非常频繁，因为你调用了 drawCharacter 在你 draw 方法，而该方法本身是用 requestAnimationFrame: 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： setInterval 运作良好，但由于它已经经常在 requestAnimationFrame，你看不到100ms的间隔。

要修复你的代码，我认为最好的办法是将以下两种方法去掉 setInterval 或 requestAnimationFrame.

如果你保持 setInterval那么就像现在的编码一样，你可以通过修改你设置的时间来改变你的角色的速度。setInterval 方法。

如果你想让角色的位置尽可能频繁地被刷新，但又不至于移动得太快，你可能想使用 requestAnimationFrame 相反，重新思考你的 updateFrame 方法来移动你的角色，取决于所花费的时间，而不仅仅是 ++currentFrame。