Animazione della sequenza di immagini con JavaScript

Question

Ho una sequenza con immagini di un oggetto da diversi angoli.Voglio che l'oggetto sia falcato ruotato quando l'utente trascina il suo mouse, e questo ho implementato.

Ma quello che voglio, è quando il mouse lascia l'area dell'immagine, che anima la sequenza dell'immagine torna alla posizione predefinita.

Ad esempio, ho 30 JPEG, dove 1.jpg è -180 ° e 30.jpg è 180 °.Naturalmente, 15.jpg è l'immagine predefinita centrata a 0 °.

Allora, se l'utente ruota fino a (-) 180 ° ruota di tornare a 0 ° dopo aver detto 3 secondi.Ma voglio che l'animazione sia il più semplice possibile.Come dovrei andare a fare questo?

Answer 1

Per l'animazione il modo più semplice possibile, è necessario utilizzare un sprite CSS, un'immagine contenente tutte le altre immagini, quindi i fotogrammi verranno caricati tutti quando l'animazione avvia.

Quindi devi solo chiamare una funzione in un determinato periodo di tempo, in base a quanto tempo si desidera che l'animazione sia e modificare la proprietà di sfondo della tua immagine.Oppure, se non utilizzando Sprite, assegna un diverso SRC ad esso.

Penso che dovresti scegliere un fotogramma per il secondo valore non inferiore a 25. Più alto rame significa un'animazione più liscia, ma più CPU utilizzata.

Questo è l'approccio di base

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 si desidera che l'immagine di animare, è solo necessario applicare lo stesso approccio ma con i numeri del fotogramma che andranno all'indietro.