顯示演員在動畫中隨時間變化的圖像

Question

我正在嘗試對演員的4個圖像進行動畫製作，但我所看到的只是一個圖像而沒有其他變化。

function init() 
{ 
i=0; 
while(i<ActStandX.length) //ActStandX holds the x locations of actor in a image spritesheet 
{ 
    for(var currentFrame=0;currentFrame<10;currentFrame++) 
    { 
     ctxBg.clearRect(0,0,800,600); //ctxBg is 2d context of canvas 
     ctxBg.drawImage(img,ActStandX[i],10,actWidth,actHeight,200,300,60,110); 
      } 
    i++; 
} 
requestAnimFrame(init); 
} 

我已經嘗試過這段代碼，但沒有成功。

Answer 1

試試這個：

var i = 0; 

function init() 
{ 
    ctxBg.clearRect(0,0,800,600); 
    ctxBg.drawImage(img,ActStandX[i++],10,actWidth,actHeight,200,300,60,110); 

    if (i == ActStandX.length) i = 0; // loop the animation 

    requestAnimFrame(init); 
} 

注意，它會改變幀每次繪製時間，因此可能會快於你真正想要。根據過去的時間來限制i的增量並不難，我相信你可以弄明白。 :)