JavaScript 라파엘 지연 사용

Question

이 코드가 있지만 애니메이션의 지연은 애니메이션의 시작 부분에서만 발생하며 원이 한 번에 모두 나타나므로 원 생성이 펼쳐지지 않습니다.

function generateCircles2(){ 
    if (totalDelay < 110){ 
     totalDelay += 1; 
     var position = Math.floor(Math.random() * 600); 
     var size = Math.floor(Math.random() * 8); 
     var circle = paper.circle(-50,position,size); 
     var time = Math.floor(Math.random() * 4000) + 2000; 
     circle.attr("fill", "#000000"); 
     var cirAni = Raphael.animation({cy: position, cx: 850}, time, generateCircles3()); 
     circle.animate(cirAni.delay(100)); 

    } 
} 

function generateCircles3(){ 
    var position = Math.floor(Math.random() * 600); 
    var size = Math.floor(Math.random() * 8); 
    var circle = paper.circle(-50,position,size); 
    var time = Math.floor(Math.random() * 4000) + 2000; 
    circle.attr("fill", "#000000"); 
    var cirAni = Raphael.animation({cy: position, cx: 850}, time, generateCircles2()); 
    circle.animate(cirAni.delay(100)); 
} 

원을 한 번에 100ms 씩 생성 할 수 있습니까? 감사합니다

Answer 1

나는 당신의 바이올린으로 연주했습니다. 그것은 작동하지 않았다. 하지만 그때 나는 그것을 작동 시켰습니다.

나는 그걸 조금 들먹입니다. 여기에 내가 가진 것이있다. 이것이 당신이 tho를 찾고있는 무엇인지 나는 100 % 확실하지 않다.

Created this new fiddle

기본적으로, 내가 한 일은 100 밀리 떨어져 각 원의 인스턴스를 분리하는 것이 었습니다.

var paper = Raphael(0, 0, 800, 600); 

function generateCircles2() { 
    if (totalDelay < 110) { 
    setTimeout(function(){ 
    totalDelay += 1; 
    var position = Math.floor(Math.random() * 600); 
    var size = Math.floor(Math.random() * 8); 
    var circle = paper.circle(-50, position, size); 
    var time = Math.floor(Math.random() * 4000) + 2000; 
    circle.attr("fill", "#000000"); 
    var cirAni = Raphael.animation({ 
     cy: position, 
     cx: 850 
    }, time, generateCircles3()); 
    circle.animate(cirAni.delay(100)); 
    }, 100); 

    } 
} 

function generateCircles3() { 
setTimeout(function(){ 
    var position = Math.floor(Math.random() * 600); 
    var size = Math.floor(Math.random() * 8); 
    var circle = paper.circle(-50, position, size); 
    var time = Math.floor(Math.random() * 4000) + 2000; 
    circle.attr("fill", "#000000"); 
    var cirAni = Raphael.animation({ 
    cy: position, 
    cx: 850 
    }, time, generateCircles2()); 
    circle.animate(cirAni.delay(100)); 
    },100); 
} 

var totalDelay = 0; 
generateCircles2();