當動畫spritesheet時減慢幀頻

我一直在嘗試動畫五幀精靈。我已經完成了它的工作，但是它僅僅從五幀開始就過快地通過幀。有沒有一個選項在幀之間創建一個輕微的延遲，所以動畫看起來並不那麼匆忙？當動畫spritesheet時減慢幀頻

這是我用來動畫精靈表的代碼。

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


}

來源

2017-02-20 Moose TheTitan

我建議你閱讀本：http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/它解釋瞭如何在渲染循環中創建一個「邏輯循環」。 – Tschallacka

使用計數器來改變幀之間的延遲。

var counter = 0;

在循環

然後：

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

來源

2017-02-20 12:13:13 reden

當動畫spritesheet時減慢幀頻

回答

相關問題