У меня проблемы с поиском правильного способа JQuery для добавления серии анимации в цепочку. Я понимаю, что если вы знаете свою последовательность заранее, вы можете просто .animate (). Animate (), но каждый шаг анимации в моем случае является динамическим. Я думаю, что мне нужно изменить свой традиционный forloop на какой-то тип цикла Jequery .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 добавит несколько комментариев ниже.