JavaScript Raphael mit Verzögerung

Question

Ich habe diesen Code, aber die Verzögerung auf die Animationen ist nur vom Anfang der Animation, und die Generierung von Kreisen ist nicht ausgebreitet, da sie alle auf einmal erscheinen.

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

Wie bekomme ich die Kreise alle 100ms und nicht alle gleichzeitig? Danke

Answer 1

Ich spielte mit deiner Geige. Es hat nicht funktioniert. Aber dann habe ich es funktioniert.

Ich fummelte damit ein bisschen. Hier ist, was ich habe. Ich bin mir nicht 100% sicher, ob Sie das suchen.

Created this new fiddle

Im Grunde, was ich tat, war Instanziierung jeden Kreises 100 ms auseinander zu trennen.

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