Desplazar una animación jQuery hacia atrás y hacia adelante

Question

Estoy haciendo una aplicación de coaching de futsal (fútbol de interior) que permite a un entrenador agregar jugadores en la pantalla, establecer su dirección de movimiento (dibujando flechas usando canvas HTML5) y luego presionar 'play 'para mover a todos los jugadores en la pantalla. Un jugador se compone de un div con una imagen de fondo de un jugador.

La animación se realiza mediante la función jquery .animate().

Todo lo que hago es cambiar el reproductor div'sleft y top atributos de posición css.

me gustaría hacer dos cosas y no está seguro de cómo esto se puede hacer:

1. Quiero crear un control deslizante jQuery y moverlo incremently como la animación se lleva a cabo. Supongo que haría esto calculando la duración total de una animación antes de comenzarla.

2. Me gustaría mover el control deslizante jQuery hacia arriba y hacia atrás, para invertir la animación y pausarla cuando sea necesario. es posible en absoluto dado que estamos moviendo divs para animación, y no haciendo una animación de secuencia cuadro por cuadro.

Answer 1

Antes comienza la animación, la forma de salvar la posición de partida?

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

Más tarde puede recuperarla usando

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

etc.

Siempre puede proporcionar una devolución de llamada a las animaciones con la opción de paso, de esta manera puede actualizar su control deslizante en consecuencia.

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

Answer 2

lo haría de esta manera:

1. Si el usuario hace clic en "Play", se inicia la animación de la divs desde su posición actual hasta su destino. Se puede calcular fácilmente la posición de tiempo y divs en función de la posición del control deslizante restante:

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

   (o algo por el estilo, donde sliderPosition es algo entre 0 y 1)

2. Si el usuario hace clic de nuevo sobre el control deslizante, llame al método .Stop() en todos los divs: de esa manera lo harán deje de animar y podrá establecerlos estáticamente: calcule la posición en la que deberían estar los divs y muévalos estáticamente a ese punto.

3. Si el usuario "deja caer" el control deslizante y "Reproducir" sigue activado, la animación debe continuar hacia delante desde el punto donde se colocó el control deslizante.

Suena como un buen proyecto que está trabajando :)