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

我和你的小提琴一起玩。它不起作用。但后来我开始工作了。

我摆弄了一下。这就是我得到的。如果这是你正在寻找的东西，我不是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 Raphael使用延迟

1 个答案: