Question

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

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

我有一系列积分与下一步的相关绘制时间。＆＃34; G＆＃34;是一个网格，我的坐标是G [x] [y] .x =＆gt; P.x和G [x] [y] .y =＆gt; 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网格上绘制任意一系列的线，并在延迟一段时间后淡出每一行。这最终将成为一个＆＃34; Simon＆＃34;节拍/时间就像游戏中序列越来越大而你必须将序列正确地回溯到节拍。

编辑：以下是按顺序加载它，但由于有两个循环，它似乎很难看：

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

它只画最后一张;是这个值与参考？我尝试在对象中包装新行，但这似乎没有帮助。更新：从进行一些测试后，上述操作无效，因为队列内部的操作直到添加完成后才会运行，＆＃34; s＆＃34;值已经一直增加。这意味着具有两个循环的那个循环正在工作，因为重新启动了迭代器。我想知道如何解决这个问题，希望没有证据。

最终版本：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允许你对数组进行迭代循环。没有计数器，所以你需要在巢顶部添加一个哨兵检查，或者如果你不想迭代所有内容那么做其他逻辑（我想只根据一个特定的限制进行迭代，所以我使用以下＆＃34; if（！（s＆lt; Limit））{return;}＆＃34;。对于每次迭代，我们将添加到命名队列，而不是默认＆＃34; fx＆＃34; queue。这允许我们在动画中对一系列步骤进行分组，然后在你打电话给＃34; dequeue＆＃34;时，按顺序（不是同时）一次性运行它们。什么＆＃39; s值得注意的是回调函数名为＆＃34; next＆＃34;，这是队列函数的第二个参数 - 为什么？因为在集合中是＆＃34; animate（）＆＃34;的第二个参数。我们有这个＆＃34;完成：下一个＆＃34;这意味着当你完成后调用该函数，回调。另一个重要的设置是＆＃34; queue：true＆＃34;，如果设置为false，一切都会在同一时间发生。我不确定这是否会重现sion per-se或只是按顺序添加到队列中，但此设置适用于我。注意，您不必在循环内进行队列调用。如果你想知道div＃myQueue，它只是DOM中一个隐藏的div来保存命名队列，并且可能是已经存在并具有真正目的的东西。

我希望这个解释可以帮助某人或那些熟悉JFoo的人在下面添加一些评论。

Answer 1

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

Animate elements sequentially using CSS3 and jQuery

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

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

Answer 2

你可以使用延迟：

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

使用JQuery按顺序动画一系列行

2 个答案: