Animando secuencia de imágenes con JavaScript

Question

Tengo una secuencia con imágenes de un objeto de diferentes ángulos.Quiero que el objeto sea faux girado cuando el usuario arrastra su mouse, y esto he implementado.

Pero lo que quiero, es cuando el mouse sale del área de la imagen, que anima la secuencia de la imagen a la posición predeterminada.

Por ejemplo, tengo 30 jpegs, donde 1.jpg es -180 ° y 30.jpg es de 180 °.Naturalmente, 15.jpg es la imagen predeterminada centrada a 0 °.

Entonces, si el usuario gira hasta (-) 180 °, girará de nuevo a 0 ° después de decir 3 segundos.Pero quiero que la animación sea lo más suave posible.¿Cómo iría a hacer esto?

Answer 1

Para que la animación sea lo más fluida posible, debe usar un sprite CSS, una imagen que contenga todas las demás imágenes, de modo que todos los fotogramas se carguen cuando comience la animación.

Luego, solo necesita llamar a una función en un período de tiempo determinado, según lo suave que desee que sea la animación, y cambiar la propiedad de fondo de su imagen.O, si no está usando sprite, asígnele un src diferente.

Creo que debería elegir un valor de fotogramas por segundo de no menos de 25. Una velocidad de fotogramas más alta significa una animación más fluida, pero se utiliza más CPU.

Este es el enfoque básico

function next_frame() {

  frame += 1;

  // start animation again from the start if last frame reached (optional)
  if ( frame == max_frames ) {
    frame = 0;
  }

  /* change either the class of your image (if you use sprites
     and specified a class for each background position) or the
     background position property directly. If not using sprites,
     assign a different image src based on current frame.
  */

  // call the function again
  setTimeout( next_frame, 1000 / 25 ); // change 25 with your desired FPS value.

}

Si desea que la imagen se vuelva a animar, solo necesita aplicar el mismo enfoque pero con los números de fotogramas al revés.