Scrollen eine jQuery Animation rückwärts und vorwärts

Question

Ich mache ein Futsal- (Hallenfußball) Coaching-Anwendung, die ein Trainer ermöglicht es Spielern, auf dem Bildschirm an, setzen ihre Bewegungsrichtung (durch Pfeile mit HTML5 Leinwand Zeichnung), und drücken Sie dann ‚Play‘ zu bewegen, alle Spieler auf die Bildschirm. Ein Spieler wird aus einem div mit einem Hintergrundbild von einem Spieler.

Animation wird durch die Verwendung jquery .animate() Funktion.

Alles, was ich tun, ist der Spieler div's left und top CSS Position Attribute ändern.

Ich möchte zwei Dinge tun und sich nicht sicher, wie das getan werden kann:

1. Ich möchte ein jQuery slider erstellen und es inkrementell zu bewegen, wie die Animation stattfindet. Ich vermute, ich würde das tun, indem die Gesamtlänge einer Animation Berechnung vor dem Starten?

2. Ich möchte den jQuery slider oben hin und her bewegen - die Animataion umkehren und es anhalten, wenn erforderlich. auf alles, was möglich ist, da wir divs für Animation bewegen, und nicht eine Frame-by-Frame-Sequenz-Animation.

tun

Answer 1

Bevor die Animation beginnt, wie etwa die Startposition zu speichern?

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

Sie können später abgerufen werden sie mit

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

etc.

Sie können durchweg einen Rückruf Animationen bieten den Schritt Möglichkeit, auf diese Weise verwenden Sie Ihre Schieberegler entsprechend aktualisieren können.

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

Answer 2

Ich würde es auf diese Weise tun:

1. Wenn der Benutzer klickt auf „Play“, startet die divs aus ihrer aktuellen Position zu ihrem Bestimmungsort Animieren. Sie können die verbleibende Zeit und divs Position leicht ausrechnen, auf dem Schieberegler Position abhängig:

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

   (oder so ähnlich, wo sliderPosition ist etwas zwischen 0 und 1)

2. Wenn der Benutzer wieder über den Schieberegler klickt, rufen Sie die .stop () -Methode auf allen divs: Auf diese Weise werden sie Animieren aufhören, und Sie werden sie setzen statisch sein können: berechnen die divs der Lage sein sollte, an und bewegen sie statisch zu diesem Punkt.

3. Wenn der Benutzer „fällt“ der Schieber und „Play“ noch aktiviert ist, dann sollte Animation vorwärts von dem Punkt weiter der Schieber fallen gelassen wurde.

Es klingt wie ein schönes Projekt Sie gerade arbeiten:)