使用 JQuery 按顺序对一系列线条进行动画处理

Question

我无法找出将一系列动画添加到链的正确 JQuery 方法。我知道，如果您提前知道您的序列，您可以只使用 .animate().animate()，但在我的情况下，每个动画步骤都是动态的。我认为我需要将传统的 forloop 更改为某种类型的 Jquery .each() 循环，以便将所有内容链接起来，以便按顺序运行。

我正在使用 Jquery.svg.anim.js（jquery svg 动画）。

我有一个与下一步相关的绘制时间的点数组。 “G”是一个网格，我的坐标是 G[x][y].x => P.x 和 G[x][y].y => P.x

step[0] = {P:G[0][0], T:500};
step[1] = {P:G[0][1], T:2000};
step[2] = {P:G[3][1], T:100};

然后我通过这个循环运行上面的代码：

for(s=0;s<(step.length-1);s++){
    var line1 = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});
    $(line1).animate({svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, step[s].T);
}

这可以在正确的时间长度内将所有线条绘制到适当的位置，但当然因为它没有正确链接，它会一次完成所有动画。 step[] 数组将具有任意长度。如果我需要改变数据结构，我可以在这一点上做到这一点。

如何以 JQuery 方式正确编写此代码，在其中我可以获取一个数组或一些步骤集合并连续遍历每个动画？我最终想在 SVG 网格上按顺序绘制任意序列的线，并在一些延迟后淡出每条线。这最终将适用于类似“西蒙”节拍/定时的游戏，其中序列越来越大，您必须将序列正确地回溯到节拍。

---

编辑：以下正在按顺序加载它，但由于两个循环，它看起来很丑：

var line = new Array();     
for(s=0;s<(step.length-1);s++){ 
    line[s] = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});      
}

$.each(line, function(s, thisLine) { 
  $('#myQueue').queue('myQueue',function(next){
           $(thisLine).animate(
            {svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, //step[s].T
            {duration: step[s].T, queue: false, complete: next} 
        )
       }) 
});
$('#myQueue').dequeue('myQueue');

但是，如果我这样做：

for(s=0;s<(step.length-1);s++){ 
    line = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});     
    n=s+1;
    $('#myQueue').queue('myQueue',function(next){
           $(line).animate(
            {svgX2: step[n].P.x, svgY2: step[n].P.y},
            {duration: step[s].T, queue: false, complete: next}
           )
    })      
}
$('#myQueue').dequeue('myQueue');

它只会绘制最后一个；这是价值与参考吗？我尝试将新行包装在一个对象中，但这似乎没有帮助。 更新：通过进行一些测试，上述操作不起作用，因为队列内部的操作在添加之后才会运行，“s”值已经一直递增。这意味着具有两个循环的循环正在工作，因为迭代器已重新启动。我想知道如何解决这个问题，希望没有评估。

---

最终版本：Javascript 和 Jquery 中范围的奥秘似乎开始发挥作用。我现在已经让它工作并构建了我的应用程序的第一次迭代的其余部分。我仍然不确定为什么某些展示位置和流程有效而其他展示位置和流程无效，但供阅读本文的其他人参考：

$.each(step, function(s, thisStep) { 
    $('#myQueue').queue('myQueue',function(next){
        var thisLine = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: lineColor()/*colours[random(9)]*/, strokeWidth: 10, id: 'line'+(s+1)});
        $(thisLine).animate(
            {svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, //step[s].T
            {duration: step[s].T, queue: true, complete: next}  
        );          
    }); 
});
$('#myQueue').dequeue('myQueue');

由于我自己对此感到困惑，所以让我尝试为其他浮动的人解释一下：$.each 允许您对数组进行迭代循环。没有计数器，因此如果您不想遍历所有内容，则需要在嵌套顶部添加哨兵检查或执行其他逻辑（我只想根据特定限制进行迭代，所以我使用了遵循“if(!(s

我希望解释对某人有所帮助，或者更熟练 JFoo 的人将在下面添加一些 cmets。

Answer 1

你可以只使用延迟：

var totalDelay=0;

for(s=0;s<(step.length-1);s++){
    var line1 = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});
    $(line1).delay(totalDelay).animate({svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, step[s].T);
    totalDelay+=step[s].T;
}

您也可以考虑使用自己的 jquery 队列。类似的东西：Single queue for jQuery animate() elements

Answer 2

刚刚问了一个类似的问题，你可以在那里找到答案：

Animate elements sequentially using CSS3 and jQuery

我也只是为了自己的好奇心而弄乱了小提琴，但上面的问题可能比我的小提琴有更好的解决方案：

http://jsfiddle.net/jensbits/XjEjx/