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

如何让圆圈每 100 毫秒生成一个，而不是一次全部生成？谢谢

Answer 1

我玩过你的fiddle。它不工作。但后来我开始工作了。

我fiddle有点喜欢它。这是我得到的。我不是 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();

JavaScript 拉斐尔使用延迟

JavaScript Raphael using delay

javascript

animation

raphael