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

私はあなたのフィドルで遊んだ。それは機能していませんでした。しかし、その後私はそれを働かせました。

私はそれをちょっと試しました。ここに私が持っているものがあります。私はこれがあなたが探しているものなら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();