¿Qué formatos compatibles con la animación son adecuados para la web?

13

Qué formatos de animación son adecuados para la web y cuáles son los pros y los contras de cada uno.

image-format animation

— Alinium
fuente

Consulte también ¿Cuál es la mejor manera de animar una ilustración para la web? para obtener más información sobre cada formato

— Zach Saucier

13

Depende del tipo de animación que necesites.

Imágenes .gif : totalmente compatibles, pero de uso limitado con marcos. Se supone que los archivos .png tienen soporte para la animación, pero no lo ves muy a menudo, si es que lo ves.
Flash, Silverlight y otros complementos : Flash tiene la mayor ubicuidad, pero todos los complementos deben instalarse en los navegadores y no necesariamente se puede contar con que se instalen en la computadora de un usuario. Puede no funcionar para plataformas móviles.
CSS3 : transformaciones o animaciones limitadas, compatibilidad limitada con el navegador.
Video HTML5 : el futuro, pero compatibilidad limitada con el navegador.
JavaScript : debe habilitarse, pero debe tener un soporte de navegador casi universal. Tipos limitados de animación. Ver Raphael.js .
Etiqueta de lienzo : soporte de navegador moderno, pero admite animaciones ricas.

— Virtuosi Media
fuente

Voy a hacer una pequeña trampa aquí, pero la <canvas>animación es esencialmente JavaScript, es solo un formato diferente en el que se pueden dibujar cosas. Si desea ser preciso, debe diferenciar entre elementos HTML de animación, SVG (que usa raphael.js) y HTML5<canvas>

— Yi Jiang

La diferencia entre SVG y la animación de lienzo en pocas palabras: con SVG, cada ruta es un elemento al que puede vincular datos y eventos como hacer clic y pasar el mouse e interactuar como un div, mientras que en Canvas, es más como si el navegador crea cosas, da Las reglas de comportamiento se olvidan de ellas. SVG no existe en IE antes de IE 9, por lo que Raphael es increíble: controla SVG o, en IE6-8, usa el antiguo equivalente de marca propia de IE (llamado VML). Lo único que sé que Raphael no funciona es en los antiguos navegadores de acciones de Android (creo que antes de la versión 2).

— user56reinstatemonica8

2

Esto se suma a la gran respuesta de Virtuosi Media:

Apple ha usado recientemente imágenes fijas JPEG y PNG para animación en su sitio. Usan JavaScript para cambiar las imágenes. Es una gran técnica si no tiene demasiados marcos, necesita soporte de transparencia alfa, desea que la animación esté en su lugar en la página y si desea un amplio soporte de navegador. La desventaja es el tamaño y el esfuerzo de descarga.

También puede ser interactivo. Si se desplaza a la sección Smart Cover de la página del iPad de Apple, puede verlo en acción: http://www.apple.com/ipad/features/

— Marc Edwards
fuente

1

Al superponer imágenes que contienen una transparencia sobre las imágenes animadas en capas debajo de la imagen. Encontrará que PNG24 es el único formato de imagen en el que el suavizado se combina correctamente con las imágenes de fondo. Con GIF y PNG8 encontrarás que tus bordes son gruesos. No se ve muy bien, pero es muy fácil pasarlo por alto.

— John Drefahl
fuente