更改更新速度而不更改循环速度？

Question

Could someone explain me how to change my hero animation without changing setTimeout. i Mean how to make hero animate slower than all canvas. by animate i mean changing frames

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 full example.

Answer 1

To clarify on the concept of 'delta time', if you were to simply increment a counter without scaling it against real time, it would increment as fast as draw is called. However by scaling it, you are guaranteed a certain amount of frames per second. This way, you can always be sure that your animation is as slow or as fast as you want it. You can set your threshold to be for example 500 milliseconds (one frame every half a second), and so on.

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