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的增量并不难，我相信你能搞清楚。：）

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

1 个答案: