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

Respostas:

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