显示演员在动画中随时间变化的图像

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的增量并不难，我相信你可以弄明白。 :)