帆布.gif注意动画

Question

我知道你不能简单地使用.gif注意：在画布上，所以我想绘制图像，然后清除图像，然后有像半秒然后做下一个图像等的间隔。

现在，这是我做了什么，但我不知道我有权利，我eant一切都在屏幕上别的原样移动，甚至在这个时候运行的其他动画的时间间隔。 （想象一下游戏中的爆炸）

我试过了，但间隔似乎不起作用，它只是一个接一个地绘制所有东西，并清除最后一个，所以你什么都看不到。

var wide = 70; 
var high = 70; 


ctxExplosion.drawImage(spriteImage,0,1250,wide,high,100,100,wide,high); 
setInterval(500); 
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight); 

ctxExplosion.drawImage(spriteImage,77,1250,wide,high,100,100,wide,high); 
setInterval(500); 
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight); 

ctxExplosion.drawImage(spriteImage,150,1250,wide,high,100,100,wide,high); 
setInterval(500); 
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight); 

ctxExplosion.drawImage(spriteImage,232,1250,wide,high,100,100,wide,high); 
setInterval(500); 
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight); 

我想它，所以它会显示类似的动画，也不想层的清算与其他爆炸当时发生干涉。任何方式在这个？

Answer 1

这是因为您没有正确使用setInterval。 setInterval需要2个参数，一个在指定时间运行的函数和等待时间。

你说什么有：

• 画出我的形象
• 在半秒什么都不做
• 清除我的形象
• ...等...

举个例子，你可能会做这样的事情：

/* Takes an array of offsets, and returns an interval timer representing the current animation*/ 
makeExplosion = function(offsetArray, frameRate) { 
    var currentFrame = 0, interval = null; 

    var animFunc = function() { 
     ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight); 
     ctxExplosion.drawImage(spriteImage,offsetArray[currentFrame],1250,wide,high,100,100,wide,high); 

     currentFrame++; 
     if (interval && (currentFrame > offsetArray.length)) { 
      clearInterval(interval); 
     } 
    } 

    interval = setInterval(animFunc, frameRate); 

    return interval; 
} 

这将运行您的动画，并返回一个区间对象，以便您可以尽快取消动画，如果你喜欢。这仅仅是一个例子，你需要传递wide和high变量或者对它们做些什么来确定它们的定义。

我没有测试的代码，但它应该是接近的工作。