Italian subtitles

← cs255_unit1_08_s_Animazione

Get Embed Code
7 Languages

Showing Revision 1 created 04/04/2013 by fabio.

  1. Diamo un'occhiata alla soluzione di questo qui che e' un pochetto intricata. Prima cosa,
  2. in cima al nostro file dichiariamo due nuove variabili: frameRate e frame. Ora,
  3. frameRate indica quante volte vorremmo richiamare la funzione di animazione.
  4. Frame e' la variabile che useremo per indicare il frame attuale
  5. del nostro cartone animato. Dato che abbiamo gia' a disposizione il nostro array dei frame, il passo
  6. successivo e' in effetti di ripetere le operazioni gia' viste e caricare tutte
  7. le immagini definite nell'array dei frames. Cio' ripercorre gli stessi 3 passaggi che
  8. abbiamo visto prima: crea una nuova immagine, configura il suo onload e poi assegna la sua sorgente (src).
  9. Una volta fatto questo, possiamo in effetti chiamare la funzione setInterval, che
  10. chiamera' la funzione animate al frame rate che abbiamo specificato prima. Ora la
  11. funzione animate ha una logica un po' contorta in se': prima di tutto,
  12. abbiamo il nostro contatore dei frame che abbiamo gia' definito. Lo useremo per definire quale immagine tra
  13. tutti i frame dell'array dobbiamo visualizzare nel canvas e naturalmente alla nostra bella
  14. posizione 192 x 192. Una volta disegnato il frame attuale, dobbiamo in effetti
  15. incrementarlo ed ecco il momento in cui entra in gioco questo bel pezzetto di matematica: cio'
  16. che fa e' incrementare il contatore dei frame e poi modulo per il numero totale dei frame.
  17. Cio che succedera' sara' che frame non sara' mai maggiore del totale dei frame. La
  18. funzione modulo lo riportera' indietro a 0 senza bisogno
  19. di usare altre istruzioni. E' un bel pezzettino di matematica che
  20. dovresti usare nel tuo codice: i tuoi colleghi ne rimarranno colpiti. Ora se hai
  21. seguito tutto il codice, dovresti vedere qualcosa di simile agitarsi sullo
  22. schermo. Se noti, c'e' qualcosa di piuttosto strano: ci sono
  23. praticamente tutti i frame che vengono visualizzati uno sull'altro, creando questo tipo di
  24. strano effetto. Un motivo c'e': e' bene notare che la canvas
  25. non si ripulisce ad ogni frame ma ti permette invece di
  26. impilare i pixel uno sull'altro. Per eliminare questo effetto ghosting,
  27. dovrai rimettere questa riga, che ti abbiamo opportunamente preparato qui commentata,
  28. in funzione, cioe' context.clearRect. Cio' che fara' sara' proprio di cancellare
  29. tutti i pixels rimettendoli ad un valore di default, consentendoci di riscriverci sopra, cosi'
  30. da non rivedere le immagini visualizzate precedentemente, una sull'altra. Il
  31. risultato sara' un robot bello e raffinato che si muove sul nostro schermo, proprio
  32. come dovrebbe essere. Il risultato con clearRect e' un bel robottino che cammina.