Прокрутка анимации jQuery назад и вперед - PullRequest
Новая
       10

Прокрутка анимации jQuery назад и вперед

5 голосов
/ 20 марта 2009

Я создаю приложение для коучинга по мини-футболу, которое позволяет тренеру добавлять игроков на экран, устанавливать их направление движения (рисуя стрелки с помощью HTML5-холста), а затем нажимать «играть», чтобы переместить всех игроков экран. Игрок состоит из div с фоновым изображением игрока.

Анимация выполняется с помощью функции jquery .animate().

Все, что я делаю, это меняю атрибуты игрока div's left и top css.

Я хотел бы сделать две вещи и не уверен, как это можно сделать:

  1. Я хочу создать слайдер jQuery и постепенно перемещать его по мере анимации. Я предполагаю, что я сделал бы это путем вычисления общей длины анимации перед ее запуском?

  2. Я бы хотел переместить ползунок jQuery вверх и назад - для изменения анимации и приостановки ее при необходимости. это вообще возможно, учитывая, что мы перемещаем div для анимации, а не делаем покадровую анимацию последовательности.

Ответы [ 2 ]

3 голосов
/ 22 марта 2009

Перед началом анимации, как насчет сохранения начальной позиции? 

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which
$(playerdiv).data("startTop",startposition.top);
$(playerdiv).data("startLeft",startposition.left);

Позже вы можете получить его, используя 

left = $(playerdiv).data("startTop")

и т.д.

Вы всегда можете предоставить обратный вызов для анимации, используя параметр шага, таким образом, вы можете соответствующим образом обновить свой ползунок. 

$(playerdiv).animate({ 
    top : targetTop,
    left : targetLeft, 
    step, function(){ magic happens here
})
0 голосов
/ 20 марта 2009

Я бы сделал это так:

  1. Если пользователь нажимает кнопку «Воспроизвести», начните анимировать элементы div от их текущей позиции до места назначения. Вы можете легко рассчитать оставшееся время и позицию деления в зависимости от положения слайдера:

    • initialDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
    • initialDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
    • initialTime = totalDuration * sliderPosition;

    (или что-то подобное, где sliderPosition находится между 0 и 1)

  2. Если пользователь снова щелкнет по ползунку, вызовите метод .stop () для всех элементов div: таким образом они прекратят анимацию, и вы сможете установить их статически: рассчитайте положение, в котором должны быть элементы div и переместите их статически в эту точку.

  3. Если пользователь «опускает» ползунок, а «Воспроизведение» все еще активировано, анимация должна продолжаться вперед с той точки, с которой упал ползунок.

Звучит как хороший проект, над которым вы работаете:)

...