1

有人可以解释一下如何在不更改 setTimeout 的情况下更改我的英雄动画。我的意思是如何让英雄动画比所有画布慢。通过动画，我的意思是改变框架

function draw() {
if (hero.ready){
    ctx.clearRect (0 , 0, 500 , 500 );
    ctx.shadowColor = "rgba( 0, 0, 0, 0.1 )";
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = -10;
    ctx.drawImage(image[hero.image],hero.frames * hero.sizeX, 0, hero.sizeX, hero.sizeY, hero.posX, hero.posY, hero.sizeX, hero.sizeY);
}
hero.frames++;
if (hero.frames >= 2) hero.frames = 0;
setTimeout( draw, 1000 / 5 );
}

JSFIDDLE完整示例。

4

1 回答 1

1

为了澄清“增量时间”的概念，如果您只是简单地增加一个计数器而不根据实时对其进行缩放，它会以draw调用的速度增加。但是，通过缩放它，您可以保证每秒一定数量的帧。这样，您始终可以确保您的动画速度与您想要的一样慢或快。您可以将阈值设置为例如 500 毫秒（每半秒一帧），依此类推。

var counter = 0;
function draw() {
  // deltaTime is how you plan on counting real seconds
  // against your frame ticks
  counter += deltaTime;

...

// threshold would be your delay
if (counter >= threshold)
{
  hero.frames++;
  if (hero.frames >= 2) hero.frames = 0;
  counter = 0;
}

}

setInterval( draw, 1000 / 5 );
于 2013-08-07T19:33:01.777 回答