Question

我有几条连接到点的SVG线。我希望逐个动画这些线条，以给人以他们被吸引的印象。

我的代码设置如下：

function connectDots(dots){
  var lines = document.querySelectorAll(".connection-line")
  var wait = 300 //Execute 1 animation every 300 ms
  for(i=1; i<dots.length; i++){
    // Some irrelevant logic
    drawLine(line,wait*(i-1));
  }
}

function drawLine(line, offset){
  var interval = 5;
  var animation = setInterval(draw,interval)
  function draw(){
    setTimeout(function(){
            // Animation logic
      }, offset)
    }
}

connectDots循环遍历点并在这些点之间绘制相应的线。动画逻辑在那里，但我排除它，因为它在这里不相关。我认为问题在于for循环，它不起作用，可能是因为它以某种方式同步执行并添加了受控延迟（300 *动画的位置，如第一个的0，对于每一个动画，第二个300，第三个600，依此类推）不可靠。

我的问题：如何正确创建这些行的队列并逐个动画？我想我正在寻找延期对象或回调，但我不确定如何开始。

附加信息：点（和线）数组的大小是静态的，而不是动态的。也许这简化了这种情况下的问题。

javascript中排队的动画（没有jQuery）

0 个答案: