Faire défiler une animation jQuery en avant et en arrière

Question

Je crée une application de coaching de futsal (football en salle) qui permet à un entraîneur d'ajouter des joueurs à l'écran, de définir sa direction de mouvement (en dessinant des flèches HTML5), puis d'appuyer sur 'pour déplacer tous les joueurs sur l'écran. Un joueur est composé d'un div avec une image de fond d'un joueur.

L'animation est en cours en utilisant la fonction jquery .animate().

Tout ce que je fais est de changer le joueur div'sleft et top attributs de position css.

Je voudrais faire deux choses et pas certain de cela peut être fait:

1. Je veux créer un curseur jQuery et déplacez-le incremently que l'animation se déroule. Je devine que je ferais ceci en calculant la longueur totale d'une animation avant de le commencer?

2. Je voudrais déplacer le curseur jQuery au-dessus d'avant en arrière - pour inverser l'animation et mettre en pause si nécessaire. est-ce possible du tout étant donné que nous déplaçons des divs pour l'animation, et ne faisons pas une animation de séquence image par image.

Answer 1

Avant l'animation commence, que diriez-vous sauver la position de départ?

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

Plus tard, vous pouvez le récupérer en utilisant

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

etc.

Vous pouvez toujours fournir un rappel aux animations en utilisant l'option d'étape, de cette façon vous pouvez mettre à jour votre curseur en conséquence.

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

Answer 2

je le ferais de cette façon:

1. Si l'utilisateur clique sur "Play", commencez animant la divs de leur position actuelle à leur destination. Vous pouvez facilement calculer la position du temps restant et divs en fonction de la position du curseur:

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

   (ou quelque chose comme ça, où sliderPosition est quelque chose entre 0 et 1)

2. Si l'utilisateur clique à nouveau sur le curseur, appelez la méthode .stop() sur tous les divs: cette façon, ils seront arrêtez d'animer et vous serez capable de les définir statiquement: calculez la position à laquelle les divs doivent être et déplacez-les statiquement jusqu'à ce point. Si l'utilisateur «laisse tomber» le curseur et que «Play» est toujours activé, l'animation doit continuer vers l'avant à partir du moment où le curseur a été supprimé.

Cela ressemble à un beau projet sur lequel vous travaillez :)