Share
L'HTML è la lingua in cui il web è integrato ed è una specie di strana bestia. Sebbene inizialmente fosse inteso come un modo per condividere facilmente le informazioni accademiche su Internet, è stato lentamente trasformato per adattarsi all'ambiente ricco di contenuti multimediali che conosciamo e amiamo. A causa della natura casuale dell'HTML (e di JavaScript, il linguaggio di programmazione che manipola gli elementi in HTML e li rende interattivi), a volte dobbiamo pensare un po 'fuori dagli schemi. In questa serie di tutorial, ti mostrerò come eseguire l'animazione cross-browser utilizzando un metodo chiamato sprite. E poiché questa è un'opportunità di apprendimento, faremo tutto senza alcuna libreria esterna (come jQuery).
Questa sarà una serie in quattro parti. Spiegherò lo sprite stesso nella prima parte (questo articolo) con alcuni JavaScript di base, ma poi nelle puntate successive passeremo ad alcune tecniche intermedie come l'incapsulamento, la gestione degli eventi e il supporto del touch screen.
Quindi iniziamo!
L'animazione è basata su un fenomeno chiamato persistenza della visione, che in pratica dice che se il tuo cervello vede molte immagini simili abbastanza velocemente, allora apparirà come se fosse un'immagine in movimento. Ogni tipo di film o video utilizza questa tecnica di base: molti fotogrammi leggermente diversi vengono visualizzati in rapida successione per far sembrare che qualcosa si muova. La pellicola funziona tipicamente a 24 fotogrammi al secondo (₁), mentre la trasmissione televisiva in Nord America viene mostrata a 29,97 fotogrammi al secondo (₂). Quindi, in altre parole, quello che vogliamo fare è creare qualcosa che mostri fotogrammi simili molto velocemente (più volte al secondo).
Ci sono due motivi principali per cui l'animazione è difficile da usare sul web:
Un modo per aggirare questi problemi è creare un foglio sprite. In elementi come divs, possiamo impostare un'immagine di sfondo per il div potrebbe essere più grande dell'elemento stesso. Possiamo anche impostare la posizione dello sfondo in modo da determinare esattamente quale parte dell'immagine più grande mostrerà. Un foglio sprite è un'immagine più grande composta da diverse immagini più piccole che possiamo spostare in modo che possa prendere il posto di molte piccole immagini. Dai un'occhiata all'esempio qui sotto, usando J, la mascotte della mia azienda Joust Multimedia:
Sebbene ci siano dieci diverse immagini di J, vengono posizionate insieme su un file PNG più grande (stiamo usando i PNG perché possono mostrare trasparenza). Se abbiamo un div questa è solo la dimensione di una delle immagini e impostiamo questo PNG come sfondo, sembrerà una singola immagine.
Vedi il hazdm su CodePen.
Anche se questo sembra un grosso problema per mostrare un'immagine, questo metodo risolve bene i due problemi che avevamo prima. Con pochissimo JavaScript (una riga!) È possibile modificare la posizione di sfondo di a div, e funziona su tutto. Inoltre, poiché tutti questi frame si trovano sulla stessa immagine, richiederà solo una richiesta per caricare quell'immagine nella pagina. Quindi, una volta caricata la pagina, può passare tra gli sprite senza alcun problema.
Quindi, come lo impostiamo per animare facilmente allora? Il primo passo è creare il foglio sprite. Dovresti sapere quali devono essere le dimensioni finali della tua immagine e spaziare gli sprite di conseguenza in una griglia. Ad esempio, la mia immagine J sarà larga 40px per un'altezza di 50px, quindi ho allineato i miei sprite esattamente a 40px in orizzontale e esattamente a 50px in verticale. Sarà probabilmente più semplice se imposti lo sprite iniziale nell'angolo in alto a sinistra.
Quindi installeremo a div con un po 'di CSS per assicurarti che tutto appaia correttamente:
Ed ecco il nostro CSS per assicurarsi che lo sprite stia mostrando correttamente:
Accentsconagua
.carattere / * * È molto importante impostare l'altezza e la larghezza di * i nostri personaggi all'altezza e alla larghezza degli sprite * / altezza: 50px; larghezza: 40px; / * * Abbiamo bisogno di posizionarli assolutamente in modo da poter avere il pieno controllo sulla loro posizione all'interno dello stage * / position: absolute; a sinistra: 100px; top: 120px; #j / * * E ora impostiamo l'immagine di sfondo per il carattere div * per essere il primo sprite (nell'angolo in alto a sinistra) * / background-image: url ('j.png'); background-repeat: no-repeat; background-position: 0 0; Notare le seguenti cose:
div alle dimensioni del nostro folletto'No-repeat' '0 0'-questo mostrerà lo sprite nell'angolo in alto a sinistraOra, prenderà solo una riga di JavaScript per cambiare la posizione dello sfondo per mostrare il prossimo sprite.
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Qui, stiamo selezionando l'elemento (con id = 'j') e impostazione dell'attributo style 'BackgroundPosition'. Si noti che è scritto 'BackgroundPosition' in JavaScript, e non come 'Background-position' in CSS. Notare anche che in JavaScript, il 'Px' è richiesto sia per l'importo x che per l'importo-non possiamo semplicemente passarlo numeri. E poiché stiamo spostando l'immagine di sfondo, dobbiamo spostarla nella direzione opposta a quella che ci si potrebbe aspettare. Per passare allo sprite sulla destra, dobbiamo spostare l'immagine di 40px a sinistra.
Ora, se abbiamo solo qualcosa di semplice da eseguire questo codice (come un pulsante), possiamo vedere i fotogrammi che cambiano in azione: controlla il DIsgk su Codepen.
Inoltre, potresti essere interessato a dare un'occhiata al codice sorgente di questa pagina. Ha tutti gli esempi qui con commenti approfonditi. Ed ecco il foglio sprite che sto usando.
Quello che abbiamo illustrato in questo tutorial è un buon inizio, ma non è proprio un'animazione adeguata. Nella seconda parte di questa serie, in realtà animeremo un po 'di corsa e salto, creando loop con i vari sprite.
Dalla quarta parte, creeremo i mouseover per un po 'di azione robotica. Vedi il ByGtv Codepen per un'anteprima.
Sebbene questo possa essere un ottimo metodo per animare sul web, ci sono alcuni inconvenienti. In primo luogo, può richiedere la creazione di ogni singolo fotogramma di animazione, che può richiedere molto tempo. Secondo, i browser non hanno il timer più accurato per l'animazione, quindi se è fondamentale che l'animazione sia sincronizzata perfettamente, allora questo potrebbe non funzionare. Infine, Safari mobile (utilizzato su iPhone e iPad) ha una "funzione" in cui, se si dispone di un'immagine di sfondo che è maggiore di 2 MB o superiore a 1024 x 1024 x 3 pixel (o 3,145,728 pixel totali), ridimensionerà automaticamente il immagine, rovinando l'effetto di scrittura. Ciò significa che sprite davvero grandi, o animazioni con un numero molto elevato di sprite, sono fuori questione. Ma, per animazioni semplici e di piccole dimensioni, che vuoi essere molto interattivo, questo è un modo semplice ed efficace per ottenere qualcosa che funzioni ovunque.
1. Prima che il suono venisse introdotto con il film, non c'era un frame rate standard. Le telecamere sono state azionate da una manovella, quindi se avessi un cameraman alle prime armi il frame rate potrebbe rallentare e accelerare involontariamente. Allo stesso modo, i teatri meno rinomati erano famosi per dire ai loro proiezionisti di accendere il proiettore più velocemente per accelerare lo spettacolo in modo che potessero adattarsi a più proiezioni. Questo è anche il motivo per cui stereotipicamente pensiamo che i film pre-suono si muovono in modo comicamente veloce - la maggior parte è stata girata da 16 a 18 fps, quindi quando li suoniamo oggi a 24 fotogrammi al secondo, si muovono più velocemente di quanto inizialmente previsto.
2. La televisione era originariamente trasmessa a 30 fps in Nord America, ma la televisione a colori causava un problema tecnico quando veniva visualizzata a quella velocità. Gli ingegneri hanno capito che potevano risolverlo rallentando il frame rate dello 0.1%, motivo per cui ora è impostato a 29.97 fps. Inoltre, oltre a tutte le stravaganti problematiche tecniche relative alla conversione di un film in 24 fps da visualizzare in televisione a 29,97 fps, la televisione a un fps più veloce ha avuto un effetto interessante sul pubblico. Molte persone che guardavano le proiezioni di prova di "The Hobbit" a 48 fps hanno riferito che l'aumento della frequenza dei fotogrammi rendeva il film "più economico", anche se era di qualità molto più alta di un film tipico, solo perché erano cresciuti associando i frame rate più veloci guardando qualcosa in televisione.
