자바 스크립트 애니메이션 하나씩 이미지

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);