Scrollen einer jQuery Animation hin und her

Question

Ich mache eine Futsal (Indoor Soccer) Coaching-Anwendung, die es einem Trainer erlaubt, Spieler auf dem Bildschirm, ihre Bewegungsrichtung (durch Zeichnen von Pfeilen mit HTML5 Canvas), und drücken Sie dann auf "Play" 'alle Spieler auf dem Bildschirm zu bewegen. Ein Spieler besteht aus einem Div mit einem Hintergrundbild eines Spielers.

Die Animation wird mit der Funktion jquery .animate() ausgeführt.

Alles, was ich tue, ist den Spieler div'sleft und top css Position Attribute zu ändern.

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

1. ich ein jQuery slider erstellen möchten und es inkrementell zu bewegen, wie die Animation stattfindet. Ich vermute, dass ich dies tun würde, indem ich die Gesamtlänge einer Animation vor dem Start berechnen würde?

2. Ich möchte den jQuery-Schieberegler nach oben und zurück bewegen - um die Animation umzukehren und sie bei Bedarf anzuhalten. ist das überhaupt möglich, wenn wir divs für animation bewegen und keine Frame-by-frame Sequenzanimation machen.

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); 

Später können Sie es abrufen

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

usw. mit

Sie können den Animationen immer einen Rückruf mithilfe der Schrittoption bereitstellen. Auf diese Weise können Sie Ihren Schieberegler entsprechend aktualisieren.

$(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", starten Sie den divs aus ihrer aktuellen Position zu ihrem Bestimmungsort Animieren. Sie können die verbleibende Zeit und divs Position auf die Position des Schiebers abhängig leicht berechnen:

   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
   • startDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
   • startTime = totalDuration * sliderPosition;

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

2. Wenn der Benutzer klickt wieder über den Schieberegler, rufen Sie die .stop() -Methode auf allen divs: Auf diese Weise werden sie Stoppen Sie die Animation und Sie können sie statisch setzen: Berechnen Sie die Position, an der sich die Divs befinden sollen, und verschieben Sie sie statisch zu diesem Punkt.

3. Wenn der Benutzer den Schieberegler "ablegt" und "Play" weiterhin aktiviert ist, sollte die Animation von dem Punkt aus fortgesetzt werden, an dem der Schieberegler abgelegt wurde.

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