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);

基本上，當我運行此代碼時，會立即繪制字符，我不明白，因為我沒有調用 drawCharacter(); 在draw()中； 然而，所以它不應該顯示字符。 如果我寫這個

function draw() {
    drawCharacter();

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

然后由於某種原因 setInterval 不再起作用，因此字符運行得如此之快，有人可以幫我解決這個問題嗎？

Answer 1

在第一個版本中，直接繪制你的角色不是因為draw function 或requestAnimationFrame ，而是因為setInterval ，它每 100ms 重繪你的角色。

在第二個版本中，您的角色確實經常更新，因為您在draw方法中調用drawCharacter ，該方法本身是使用requestAnimationFrame調用的： setInterval工作正常，但由於它已經在requestAnimationFrame中經常更新，您看不到100 毫秒間隔。

要修復您的代碼，我認為最好的方法是刪除setInterval或requestAnimationFrame 。

如果您保留setInterval ，那么按照現在的編碼，您可以通過修改為setInterval方法設置的時間來更改角色的速度。

如果您希望盡可能頻繁地刷新角色的 position，但不要移動得太快，您可能需要改用requestAnimationFrame並重新考慮您的updateFrame方法來根據所花費的時間移動角色，而不僅僅是 ++currentFrame。