Javascript動畫圖像一個接一個

Question

大家好我正在開發Javascript Canvas項目，這裏有一小段代碼不起作用，我只是想用100個時間延時動畫一個一個的圖像，但是它動畫化所有圖像立刻。

for (var i = 0; i < queueIdArr.length; i++){ // queueIdArr.length = 4 
    (function(i){ 
     var animInterval = window.setInterval((function(i){ 
      if (i == (queueIdArr.length - 1)){ 
       animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); // my own function, it works fine. animate (id, new_properties, duration, callback); 
       window.clearInterval(animInterval); 
      } else { 
       animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); 
      } 
     })(i), 100); 
    })(i); 
}​ 

Answer 1

您要爲所有queueIdArr元素創建setInterval。 setInterval的第一個參數必須是您的代碼中的函數(function(){})正被立即調用，並且(function(){})的值爲undefined。

以下可能會解決您的代碼。

var i =0; 
    var animInterval = window.setInterval(function(){ 
     if (i == (queueIdArr.length - 1)){ 
      animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); 
      window.clearInterval(animInterval); 
     } else { 
      animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); 
     } 
     i++; 
    }, 100);