jQuery: animazione PNG

Tutti conoscono le immagini GIF animate e molti si chiedono se è possibile animare anche le immagini PNG. Con jQuery questo è possibile. In questo articolo vedremo come creare una semplice animazione usando un'immagine PNG. Vediamo insieme i dettagli dell'implementazione.

Abbiamo la seguente immagine PNG:

Vogliamo creare l'effetto di un uomo che cammina. Per prima cosa definiamo la marcatura:

<div id="anim"></div>

Quindi inseriamo il file PNG come immagine di sfondo:

#anim {
	height: 127px;
	width: 60px;
	background: url(walker.png) no-repeat 0 0;
	margin: 0 auto;
}

Le dimensioni dell'elemento devono essere ridotte fino a comprendere un solo frame alla volta. Con jQuery creiamo un timer che ciclicamente modificherà l'asse x della proprietà background-position usando un array di posizioni:

$(function() {

  var steps = [0, 60, 110, 171, 230, 300];
  var index = -1;
  
  var interval = setTimeout(function() {
  
     index++;
     
     if(index == 5) {
     
       index = 0;
     
     }
  
    
    $('#anim').css('backgroundPosition', '-' + steps[index] + 'px 0px');
    
    setTimeout(arguments.callee, 100);
  
  
  }, 25);

});

La proprietà background-position avrà un valore progressivo negativo in modo da far apparire tutti i frame in modo ripetuto. Questo perchè dobbiamo sposatre l'immagine di sfondo da destra verso sinistra (lo spostamento predefinito è da sinistra verso destra).

Potete visionare l'esempio finale in questa pagina.