JavaScript Raphael 使用延迟答案

【问题标题】：JavaScript Raphael using delayJavaScript Raphael 使用延迟
【发布时间】：2017-11-14 19:12:34
【问题描述】：

我有这个代码，但是动画的延迟只是从动画的开始，并且圆圈的生成并没有分散，因为它们都是同时出现的。

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 毫秒而不是一次生成一个圆圈？谢谢

【问题讨论】：

如果你可以在JSFiddle中组织可重现的例子，我可以看看。
jsfiddle.net/3yd8bfde/8
我运行它时没有任何反应。请添加 HTML/CSS。
抱歉，这里完全是初学者，以前从未使用过 jsfiddle，不知道如何运行它
您可以将您的 HTML/CSS 添加到帖子中吗？

标签： javascript animation raphael

【解决方案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();

【讨论】：

非常感谢，这正是我想要的