Animando sequência de imagens com JavaScript

Question

Tenho uma sequência com imagens de um objeto de diferentes ângulos.Quero que o objeto seja girado de forma falsa quando o usuário arrastar o mouse, e isso eu implementei.

Mas o que eu quero, é quando o mouse sai da área da imagem, que anime a sequência de imagens de volta à posição padrão.

Por exemplo, tenho 30 JPEGs, onde 1.jpg é -180 ° e 30.jpg é 180 °.Naturalmente, 15.jpg é a imagem padrão centralizada em 0 °.

Portanto, se o usuário girar totalmente para (-) 180 °, ele girará de volta para 0 ° após, digamos, 3 segundos.Mas quero que a animação seja o mais suave possível.Como eu faria isso?

Answer 1

Para que a animação seja o mais suave possível, você deve usar um sprite CSS, uma imagem contendo todas as suas outras imagens, para que todos os frames sejam carregados quando a animação começar.

Então, você só precisa chamar uma função em um determinado período de tempo, com base em quão suave você deseja que a animação seja, e alterar a propriedade de plano de fundo de sua imagem.Ou, se não estiver usando sprite, atribua um src diferente a ele.

Acho que você deve escolher um valor de quadro por segundo não inferior a 25. Taxa de quadros mais alta significa animação mais suave, mas mais CPU usada.

Esta é a abordagem básica

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.

}

Se você quiser que a imagem seja animada de volta, você só precisa aplicar a mesma abordagem, mas com os números dos quadros indo para trás.