requestAnimationFrame() 似乎不起作用

Posted 2023-03-25

【中文标题】requestAnimationFrame() 似乎不起作用

【英文标题】：requestAnimationFrame() doesn't seem to work

【发布时间】：2020-09-23 12:52:33

【问题描述】：

我有这样的代码，但不是真的，这是我的代码：

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 不再工作，所以字符运行得如此之快，谁能帮我解决这个问题？

【参考方案1】：

在第一个版本中，你的角色被直接绘制不是因为draw函数或requestAnimationFrame，而是因为setInterval，每100ms重绘你的角色。

在第二个版本中，你的角色确实经常更新，因为你在 draw 方法中调用了 drawCharacter，而该方法本身是用 requestAnimationFrame 调用的：setInterval 工作正常，但因为它已经非常更新了通常在requestAnimationFrame，你看不到100ms的间隔。

要修复您的代码，我认为最好的方法是删除 setInterval 或 requestAnimationFrame。

如果您保留setInterval，那么按照现在的编码，您可以通过修改为setInterval 方法设置的时间来改变角色的速度。

如果您希望尽可能频繁地刷新角色的位置，但不要移动得太快，您可能需要改用 requestAnimationFrame 并重新考虑您的 updateFrame 方法来根据所花费的时间移动角色，而不是只需 ++currentFrame。