Animare un'immagine PNG con Javascript

Oggi voglio spiegarvi come animare un file PNG, con all'interno una sequenza di immagini, tramite Javascript in tre diversi contesti:

1. Web
2. Windows 8
3. Windows Phone

Prima di iniziare, bisogna procurarci l'immagine da animare, io ne creerò una con GIMP:

WEB

---

Per la prova web creiamo una cartella in una qualsiasi posizione, all'interno mettiamo la nostra immagine, un nuovo file style.css, un file anim.js e un file index.html. Apriamo style.css ed inseriamo le seguenti righe:

Spiegazione: Creiamo un nuovo stile per l'elemento square di altezza e larghezza 40px con immagine di sfondo square.png e senza ripetizione.

Apriamo il file anim.js ed inseriamo:

Spiegazione: Creiamo una funzione che genera un oggetto Square con le proprietà descritte.

Infine apriamo il file index.html:

Spiegazione: Creiamo un oggetto square con 40px di altezza e 40px di larghezza, 8 frames, e il nome dell'elemento html nel quale andare a disegnare. La funzione scroll si occupa di scorrere l'immagine di sfondo dell'elemento html e di alzarla di 40px finché non arriva in fondo, per ricominciare da capo. La funzione init effettua una prima animazione, poi setta un timer che esegue la scroll ogni 100 millisecondi.

Adesso clicchiamo due volte sul file index.html per vederne gli effetti.

Piaciuto?

WINDOWS 8

---

Per la prova in Windows 8, non facciamo altro che creare un nuovo progetto HTML5/Javascript da Visual Studio, importare l'immagine e il file anim.js nel progetto, modificare il file default.css aggiungendo le righe del file style.css e modificare il file default.html aggiungendo le righe del file index.html.

Progetto completo con le importazioni

default.css modificato

default.html modificato

Eseguiamolo per ottenere lo stesso risultato della pagina web.

WINDOWS PHONE 8

---

Creiamo un progetto HTML5/Javascript per Windows Phone 8 da Visual Studio, consiglio di utilizzare quello creato tramite questi due articoli:

1. Windows Phone 8 e javascript parte 1
2. Windows Phone 8 e javascript parte 2

Creiamo la cartella images, importiamo l'immagine del quadrato, modifichiamo il file default.css, default.html e default.js.

Progetto creato con le importazioni corrette

default.css modificato correttamente

default.js modificato correttamente

default.html modificato correttamente

Eseguiamo.

Presto molte altre implementazioni di questo tipo di codice, anche per la creazione di Spitesheet per il motore grafico qui descritto