Scorrimento un'animazione jQuery avanti e indietro

Question

Sto facendo un futsal (calcio indoor) applicazione di coaching, che permette ad un allenatore di aggiungere giocatori sullo schermo, impostare la loro direzione di movimento (disegnando frecce utilizzando HTML5 canvas), quindi premere 'play' per spostare tutti i giocatori sul schermo. Un giocatore si compone di un div un immagine di un giocatore di sfondo.

Animazione è stato fatto utilizzando la funzione jquery .animate().

Tutto ciò che faccio è cambiare il giocatore div's left e top attributi posizione css.

Vorrei fare due cose e sicuro su come ciò può essere fatto:

1. Voglio creare uno slider jQuery e spostarlo incremently come l'animazione si svolge. Sono indovinando farei questo calcolando la lunghezza totale di un'animazione prima di iniziarlo?

2. desidero spostare il cursore jQuery sopra avanti e indietro - invertire l'animataion e mettere in pausa quando richiesto. è questo possibile affatto visto che stiamo muovendo div per l'animazione, e non facendo un'animazione sequenza fotogramma per fotogramma.

Answer 1

Prima dell'inizio di animazione, che ne dici di salvare la posizione di partenza?

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

In seguito è possibile recuperarlo usando

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

ecc.

È possibile allways fornire un callback per le animazioni utilizzando l'opzione di passaggio, in questo modo è possibile aggiornare il dispositivo di scorrimento di conseguenza.

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

Answer 2

Vorrei fare in questo modo:

1. Se l'utente fa clic su "Play", avviare l'animazione div dalla loro posizione attuale alla destinazione. Si può facilmente calcolare il tempo rimanente e div posizione a seconda della posizione del dispositivo di scorrimento:

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

   (o qualcosa del genere, in cui sliderPosition è qualcosa tra 0 e 1)

2. Se l'utente fa clic di nuovo sopra il cursore, chiamare il metodo .Stop () su tutti i div: in questo modo essi si fermerà e sarete in grado di impostare loro staticamente: calcolare la posizione dei div dovrebbero essere in e spostarli in modo statico a quel punto.

3. Se l'utente "cade" il cursore e "Play" è ancora attivata, quindi l'animazione dovrebbe continuare in avanti dal punto il dispositivo di scorrimento è stata abbandonata.

Sembra un bel progetto a cui stai lavorando:)