javascript - tutorial - sea css animation




Perché non animare GIF invece di animazioni CSS animate? (2)

In cima alla risposta di Joseph the Dreamer ...

Per quanto ne so, o almeno lo era, i file GIF NON sono true color, un'altra ragione per usare JPG / PNG come sprite di css.

Nelle recenti tendenze ho visto persone animare gli sprite CSS usando JavaScript invece di usare GIF animate?

Ex:

È tutto solo per mostrare o sperimentare con la tecnologia o ci sono dei benefici. Sono interessato a conoscere i benefici, se ci sono. La ragione per cui sto chiedendo è che non riuscivo a capire come in entrambi i casi abbiamo bisogno di generare i frame intermedi (principalmente usando la tecnica di tweening).


  • Controllo

    Non hai il controllo sulle GIF animate. Non puoi avviarli, non puoi fermarli. Si animano appena caricano.

    Con gli sprite, puoi controllare l'animazione. Puoi iniziare, fermarti e reagire agli eventi del browser, scorrere l'animazione. Ad esempio, Google Doodles di solito si attiva quando fai clic su di essi.

    Un sistema di controllo GIF elegante può essere trovato nel 9gag. Puoi avviarli aggiungendoli al DOM, e fermarli rimuovendoli e scambiandoli con una "vista primo fotogramma" pre-generata. Ma per quanto riguarda le GIF.

  • Istanze indipendenti

    Quando carichi più istanze della stessa GIF, tutte queste istanze utilizzano la stessa immagine sulla pagina e si spostano contemporaneamente. Se hai una serie di GIF danzanti di unicorno, balleranno allo stesso tempo. Danza sincronizzata!

    Ma con gli sprite, anche se stai usando le stesse immagini, l'animazione si basa sullo script sottostante. Quindi, se uno sprite è animato da uno script e un altro da un altro script, entrambe le animazioni possono essere eseguite indipendentemente e in modo diverso l'una dall'altra.

    Questo ti impedisce di creare un'altra GIF ed è facile da modificare poiché stai solo cambiando lo script.

  • Garantire un'animazione fluida

    Le GIF animate si animano solo durante il caricamento e, quando Internet è lento, le animazioni si bloccano finché non viene caricata altra immagine.

    Al contrario, il vantaggio degli sprites è che è possibile precaricarli, assicurarsi che tutte le immagini vengano caricate in anticipo. Questo assicura che le risorse utilizzate per quell'animazione siano già caricate prima dell'animazione per assicurarti che si anima il più agevolmente possibile.

    Tuttavia, le GIF sono immagini fisse. Puoi caricarli dinamicamente dal DOM e ascoltare un evento di caricamento prima di aggiungerli al DOM.

  • Rendering parziale

    Con gli sprite PNG, puoi fare "partial" nell'animazione, rompendo una scena di animazione in parti. Ad esempio, quando un personaggio si ferma, ma le braccia si muovono. Non è necessario animare l'intero personaggio o l'intera scena. Puoi posizionare un elemento raffigurante lo sprite del corpo del personaggio in uno stato di "blocco" mentre le braccia sono un elemento diverso che si sta animando. Ciò consente di risparmiare spazio e dimensioni del foglio sprite. Un buon esempio di questo è stato il Doodle di Mother's Day 2012 di Google.

    Al contrario, la maggior parte delle volte , ogni fotogramma di un'animazione GIF è un'immagine intera e si anima indipendentemente dal fatto che qualcosa si muova o meno. Più fotogrammi, più grande è la dimensione della GIF.

  • Le GIF non sono in scala

    Le GIF erano pensate per le icone. Il rapporto tra dimensioni del file e dimensioni dell'immagine non si adatta bene alle GIF rispetto a PNG e JPG.





animated-gif