Javascript 更改更新速度而不更改循环速度?

Javascript 更改更新速度而不更改循环速度?,javascript,canvas,Javascript,Canvas,有人能告诉我如何在不更改设置超时的情况下更改英雄动画吗。我的意思是如何使英雄动画比所有画布都慢。我所说的动画是指改变帧 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.drawI

有人能告诉我如何在不更改设置超时的情况下更改英雄动画吗。我的意思是如何使英雄动画比所有画布都慢。我所说的动画是指改变帧

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

完整示例。

为了澄清“增量时间”的概念,如果您只是简单地增加一个计数器,而不根据实时缩放它,那么它将以调用
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 );

为了澄清“增量时间”的概念,如果你只是简单地增加一个计数器,而不根据实时进行缩放,那么它将以调用
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 );

您想更改的动画是什么?我看不出在不更改
setTimeout
间隔的情况下,您希望如何更改更新速度-这就是更新速度,对吗?如何使英雄动画比所有画布动画都要慢,以符合帧速率。如果你的画布每秒更新60次,并且动画有30帧,那么每隔一帧就会显示一帧。耶,我知道我想实现画布每秒60帧,但是只有很少帧的动画速度要慢得多。所以看起来很正常,你想改变动画吗?我看不出在不更改
setTimeout
间隔的情况下,您希望如何更改更新速度-这就是更新速度,对吗?如何使英雄动画比所有画布动画都要慢,以符合帧速率。如果你的画布每秒更新60次,并且动画有30帧,那么每隔一帧就会显示一帧。耶,我知道我想实现画布每秒60帧,但是只有很少帧的动画速度要慢得多。所以看起来很正常