Quais formatos de animação são adequados para a web?

13

Quais formatos de suporte à animação são adequados para a Web e quais são os prós e os contras de cada um.

image-format animation

— Alinium
fonte

Veja também Qual é a melhor maneira de animar uma ilustração para a Web? para mais informações sobre cada formato

— Zach Saucier

13

Depende do tipo de animação que você precisa.

.gif images - Uso totalmente suportado, mas limitado, com molduras. Os arquivos .png devem ter suporte para animação, mas você não o vê na natureza com muita frequência, se é que existe.
Flash, Silverlight e outros plug - ins - o Flash tem a maior onipresença, mas todos os plug-ins precisam ser instalados nos navegadores e não podem necessariamente ser necessários para serem instalados no computador do usuário. Pode não funcionar para plataformas móveis.
CSS3 - Transformações ou animações limitadas, suporte limitado ao navegador.
Vídeo HTML5 - o futuro, mas suporte limitado ao navegador.
JavaScript - precisa estar ativado, mas deve ter suporte quase universal ao navegador. Tipos limitados de animação. Veja Raphael.js .
Etiqueta de tela - Suporte moderno ao navegador, mas suporta animações avançadas.

— Virtuosi Media
fonte

Vou detalhar aqui, mas a <canvas>animação é essencialmente JavaScript - é apenas um formato diferente no qual as coisas podem ser desenhadas. Se você quiser ser mais preciso, você deve diferenciar entre animar elementos HTML, SVG (que Raphael.js usos) e HTML5<canvas>

— Yi Jiang

A diferença entre SVG e animação de tela em poucas palavras - com SVG, todo caminho é um elemento ao qual você pode vincular dados e eventos como clique e mouseover e interagir com uma div, enquanto no Canvas, é mais como o navegador que cria coisas, fornece as regras de comportamento esquecem-se delas. O SVG não existe no IE antes do IE 9, e é por isso que Raphael é incrível - ele controla o SVG ou, no IE6-8, usa o antigo equivalente de marca própria do IE (chamado VML). A única coisa que sei que Raphael não funciona é nos antigos navegadores de ações Android (antes da versão 2, eu acho).

— user56reinstatemonica8

2

Esta é uma adição à grande resposta da Virtuosi Media:

A Apple recentemente usou imagens JPEG e PNG estáticas para animação em seu site. Eles usam JavaScript para mudar as imagens. É uma ótima técnica se você não possui muitos quadros, precisa de suporte à transparência alfa, deseja que a animação esteja no lugar da página e se deseja amplo suporte ao navegador. A desvantagem é o tamanho e o esforço do download.

Também pode ser interativo. Se você rolar para a seção Smart Cover da página do iPad da Apple, poderá vê-lo em ação: http://www.apple.com/ipad/features/

— Marc Edwards
fonte

1

Ao sobrepor imagens que contêm uma transparência na parte superior das imagens animadas nas camadas abaixo da imagem. Você verá que PNG24 é o único formato de imagem em que a suavização de serrilhado combina corretamente com as imagens de segundo plano. Com GIF e PNG8, você descobrirá que suas bordas são todas grossas. Não parece muito bom, mas muito fácil de perder.

— John Drefahl
fonte