javascript - 动画 Sprite 表时减慢帧速率

Question

我一直在尝试制作一个五帧 Sprite 的动画。我已经让它工作了，但是它通过帧的速度太快了，因为它只有五帧。是否有一个选项可以在帧之间创建轻微的延迟，以便动画看起来不那么仓促？

这是我用来为 Sprite 表设置动画的代码。

    var canvas = document.querySelector("#openmind");
var context = canvas.getContext("2d");

//Loading Spritesheet
var myImage = new Image();
myImage.src = "img/sprites/foxsprite.png";
myImage.addEventListener("load", loadImage, false);

function loadImage(e) {
    animate();
}

//Setting size details for frmae
var shift = 0;
var frameWidth = 44.2;
var frameHeight = 72;
var totalFrames = 5;
var currentFrame = 0;

function animate() {

    context.clearRect(120, 25, 300, 300);
    //draw each frame + place them in the middle
    context.drawImage(myImage, shift, 0, frameWidth, frameHeight,
        120, 25, frameWidth, frameHeight);

    shift += frameWidth + 1;


    /*
     Start at the beginning once you've reached the
     end of your sprite!
     */
    if (currentFrame == totalFrames) {
        shift = 0;
        currentFrame = 0;
    }

    currentFrame++;

    requestAnimationFrame(animate);


}

Answer 1

使用计数器在更改帧之间引入延迟。

var counter = 0;

然后在你的循环中:

if(counter == 10){
   currentFrame++;
   counter = 0;
} else {
   counter++;
}