Quali formati che supportano l'animazione sono adatti per il web?

13

Quali formati che supportano l'animazione sono adatti per il web e quali sono i pro ei contro di ciascuno.

image-format animation

— Alinium
fonte

Vedi anche Qual è il modo migliore per animare un'illustrazione per il web? per ulteriori informazioni su ciascun formato

— Zach Saucier,

13

Dipende dal tipo di animazione di cui hai bisogno.

Immagini .gif : completamente supportate, ma con un uso limitato con i frame. I file .png dovrebbero avere il supporto per l'animazione, ma non lo vedi in natura molto spesso, se non del tutto.
Flash, Silverlight e altri plug-in : Flash presenta la maggior quantità di ubiquità, ma tutti i plug-in devono essere installati nei browser e non possono essere necessariamente considerati come installati sul computer di un utente. Potrebbe non funzionare per piattaforme mobili.
CSS3 - Trasformazioni o animazioni limitate, supporto browser limitato.
Video HTML5 - Il futuro, ma limitato supporto del browser.
JavaScript : deve essere abilitato, ma dovrebbe avere un supporto browser quasi universale. Tipi limitati di animazione. Vedi Raphael.js .
Tag Canvas : supporto browser moderno, ma supporta ricche animazioni.

— Virtuosi Media
fonte

Sto andando a nitpick qui, ma l' <canvas>animazione è essenzialmente JavaScript - è solo un formato diverso su cui è possibile disegnare elementi. Se vuoi essere preciso, dovresti distinguere tra animare elementi HTML, SVG (che utilizza raphael.js) e HTML5<canvas>

— Yi Jiang

La differenza tra SVG e l'animazione della tela in breve: con SVG, ogni percorso è un elemento a cui puoi associare dati ed eventi come clic e passaggio del mouse e interagire con un div, mentre in Canvas è più come se il browser crea cose, dà queste regole comportamentali poi se ne dimentica. SVG non esiste in IE prima di IE 9, motivo per cui Raphael è fantastico: controlla SVG o, in IE6-8, utilizza il vecchio equivalente di IE con il proprio marchio (chiamato VML). L'unica cosa su cui so che Raphael non funziona sono i vecchi browser Android (prima della versione 2 credo).

— user56reinstatemonica8

2

Ciò si aggiunge alla grande risposta di Virtuosi Media:

Apple ha recentemente utilizzato immagini fisse JPEG e PNG per l'animazione sul proprio sito. Usano JavaScript per cambiare le immagini. È un'ottima tecnica se non hai troppi fotogrammi, hai bisogno del supporto per la trasparenza alfa, vuoi che l'animazione sia presente nella pagina e se vuoi un ampio supporto del browser. L'aspetto negativo è la dimensione e lo sforzo del download.

Può anche essere interattivo. Se scorri fino alla sezione Smart Cover della pagina iPad di Apple, puoi vederla in azione: http://www.apple.com/ipad/features/

— Marc Edwards
fonte

1

Quando si sovrappongono immagini che contengono una trasparenza sopra le immagini animate su livelli sotto l'immagine. Scoprirai che PNG24 è l'unico formato di immagine in cui l'antialiasing si fonde correttamente con le immagini di sfondo. Con GIF e PNG8 scoprirai che i tuoi bordi sono tutti grossi. Non sembra molto buono, ma davvero facile da perdere.

— John Drefahl
fonte