Przewijanie animacji jQuery do tyłu i do przodu

Question

Przygotowuję aplikację trenerską futsal (indoor soccer), która umożliwia trenerowi dodawanie graczy na ekranie, ustawianie ich kierunku ruchu (poprzez rysowanie strzałek przy użyciu płótna HTML5), a następnie naciskanie przycisku "graj ", aby przesunąć wszystkich graczy na ekranie. Gracz składa się z elementu div z obrazem gracza.

Animacja jest wykonywana za pomocą funkcji jquery .animate().

Wszystko co robię to zmiana atrybutów pozycji css gracza div'sleft i top.

Chciałbym zrobić dwie rzeczy i pewny jak to można zrobić:

1. Chcę utworzyć suwak jQuery i przenieść go incremently jak animacja ma miejsce. Zgaduję, że zrobiłbym to przez obliczenie całkowitej długości animacji przed jej uruchomieniem?

2. Chciałbym przesunąć suwak jQuery powyżej do tyłu i do przodu - aby odwrócić animataion i wstrzymać go w razie potrzeby. jest to w ogóle możliwe, że poruszamy divy dla animacji i nie robimy animacji sekwencji klatka po klatce.

Answer 1

przed rozpoczęciem animacji, jak o zapisaniu pozycji wyjściowej?

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

Później można pobrać go za pomocą

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

etc.

Możesz zawsze wywołać oddzwonienie do animacji za pomocą opcji kroku, w ten sposób możesz odpowiednio zaktualizować suwak.

$(playerdiv).animate({ 
    top : targetTop, 
    left : targetLeft, 
    step, function(){ magic happens here 
}) 

Answer 2

chciałbym zrobić to w ten sposób:

1. Jeśli użytkownik kliknie "Play", start animowanie div od ich aktualnej pozycji do miejsca przeznaczenia. Można łatwo obliczyć pozostały czas i DIV położenie w zależności od położenia suwaka:

   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
   • startingDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
   • startingTime = totalDuration * sliderPosition;

   (lub coś w tym stylu, gdzie sliderPosition jest coś pomiędzy 0 i 1)

2. Jeśli użytkownik kliknie ponownie na suwaku, należy wywołać metodę .Zatrzymaj() na wszystkich div: w ten sposób będą przestań animować i będziesz mógł ustawić je statycznie: obliczyć pozycję, w której powinny znajdować się elementy div i przenieść je statycznie do tego punktu.

3. Jeśli użytkownik "upuści" suwak i "Odtwarzanie" jest nadal aktywny, animacja powinna być kontynuowana od punktu, w którym spadł suwak.

To brzmi jak miły projektu, nad którym pracujesz :)