Nos últimos anos tem-se vindo a assistir à crescente introdução de animações em páginas web. Estas, de maior ou menor protagonismo, são responsáveis pela adição de uma componente mais dinâmica ao site, contribuindo para a interação entre os utilizadores e o mesmo. Mais do que uma simples manifestação estética, as animações podem auxiliar e facilitar na navegação, e até realçar produtos e serviços particulares para chamar à atenção de potenciais clientes. Naturalmente, as próprias tecnologias de animação na web foram evoluindo, acompanhando o aumento da largura de banda e dos recursos computacionais, tanto do lado dos servidores web, como dos computadores dos utilizadores.

A utilização de animações em websites teve o seu início com a introdução de elementos GIF que agregavam várias imagens em sequência, permitindo a apresentação de pequenos loops visuais. Contrariamente aos efeitos simples criados em HTML, existentes até à altura,  como por exemplo a utilização da tag para fazer piscar texto ou a tag > para fazer o texto mover-se horizontalmente, os GIFs animados representaram uma revolução nas páginas web. A partir desse momento, os websites tornaram-se autênticos placards de imagens e texto em movimento. No entanto, as tags de HTML tinham funcionalidade limitada, e as imagens GIF podiam ser pesadas, o que obrigava a que a resolução das mesmas fosse baixa, para além de que apresentavam uma paleta de cores reduzida (8-bit inicialmente).

Desta forma, devido à natureza estática com que inicialmente foi criado o HTML, tornou-se claro que, para conseguir exibir outro tipo de informação, este precisava de ser complementado com elementos externos. Exemplo desses elementos foram as Applets Java, que podiam ser invocadas a partir do código das páginas web para apresentar elementos de animação criados com código e bibliotecas implementados com recurso à linguagem Java.

Nesta mesma linha, surge também o Adobe Flash (originalmente Macromedia Flash e Shockwave Flash), uma tecnologia de animação com um grau de liberdade sem precedentes e que permitia desenhar qualquer tipo de forma, layout, animação, interação e usar qualquer fonte, tudo numa única tecnologia. O resultado final destes elementos era empacotado num ficheiro único, e enviado ao browser para apresentação no site. No entanto, e apesar de constantes evoluções e da sua popularização em animações introdutórias dos sites, o Flash esteve sempre associado a um grande consumo de recursos computacionais. Com a popularidade dos equipamentos portáteis este consumo elevado de recursos tornou-se mais notório, pois traduzia-se num consumo elevado da bateria e na consequente redução na duração da mesma, algo crítico nos dispositivos móveis. Eram também frequentes os problemas resultantes de incompatibilidade entre versões de browsers. Quando em 2007 a Apple decidiu retirar o seu suporte do browser do primeiro iPhone, a tecnologia entrou em declínio. Curiosamente, em 2007, a Microsoft lançou a sua própria tecnologia de escrita de aplicações ricas online, o Silverlight, similar ao Flash. Apesar da grande vantagem de estar integrado no ecossistema de tecnologias de desenvolvimento da Microsoft (o .NET), um conjunto de incompatibilidades entre a sua utilização nos browsers dos telemóveis e nos dos computadores pessoais, ditaram a remoção do seu suporte de browsers como o Chrome em 2015. O próprio browser que vem incluído com a versão 10 do Windows, o Microsoft Edge, não tem suporte nativo para o Silverlight.

No entanto para pequenas animações do interface gráfico nenhuma destas soluções se apresentava óptima. Não tardou muito tempo até que, através do uso de Javascript, se conseguissem criar pequenas animações de elementos HTML dentro do browser. Recorrendo a alguma criatividade e engenharia, os programadores conseguiram tirar partido das funcionalidades e propriedades do trio Javascript, HTML e CSS para alterar o tamanho e posição de elementos HTML numa página. Estas pequenas alterações em pequenos períodos de tempo, permitiram criar as primeiras animações nativas, que não consistiam apenas em texto a piscar ou a rodar em rodapé. Longe de ser perfeita ou óptima em termos de desempenho, tornaram-se numa inovação que permitia criar um factor de diferenciação dos sites criados até então, até porque o domínio desta técnica não estava ao alcance de todos os programadores. Isto veio a alterar-se quando uma das mais conhecidas e usadas bibliotecas de Javascript, o jQuery, incluiu no seu conjunto de funções auxiliares mecanismos simples e intuitivos que se revelaram essenciais na massificação desta técnica, tornando-a acessível a praticamente todos os programadores. Mas havia um problema ao qual o jQuery, por melhor que fosse, não poderia dar resposta; o desempenho gráfico desta técnica dependia grandemente da capacidade dos browsers e computadores onde eram executados. Esta ficava muitas vezes longe do desejável e, em vez de criar um efeito agradável, tinha exactamente o efeito contrário.

Paralelamente à utilização de plug-ins e das técnicas básicas de animação elementos HTML, as funcionalidades nativas dos browsers foram gradualmente sendo alvo de evoluções constantes.

Se por um lado a necessidade de instalar plug-ins diversos para consultar páginas web, originalmente concebidas para estar ao alcance e disponibilidade de todos, estava a segmentar e bloquear o acesso a vários utilizadores, tornou-se óbvio que a livre utilização da web não poderia estar nas mãos dos interesses privados das empresas que desenvolviam os plug-ins. Como se isso não fosse suficiente, muitas organizações por motivos de controlo e segurança, não permitiam aos colaboradores instalar programas nos seus computadores, impossibilitando-os de consultar páginas que necessitassem de plug-ins para serem visualizadas. Algo tinha de mudar.

Estas foram algumas das preocupações que estiveram presentes na ordem de trabalhos do consórcio W3C (World Wide Web Consortium), a organização que define os standards para a web, quando desenharam o futuro das especificações das tecnologias que a constituem.

Do trabalho conjunto deste consórcio com os fornecedores dos navegadores web actualmente mais usados, resultaram browsers cada vez mais robustos, com melhor desempenho, e em conformidade com a implementação das tecnologias para a web.

Como resultado destes trabalhos surgiu a mais recente especificação de CSS, o CSS3, que introduziu novas funcionalidades que vieram possibilitar a criação de transições animadas entre diferentes estados de elementos HTML. O browser encarrega-se depois de controlar a sequência da animação, de forma optimizada e sem a necessidade de recorrer  a bibliotecas externas. Esta tornou-se na forma ideal para construir animações de menus, caixas de mensagem, efeitos de texto, fundos e bordos mais elaborados, ou até mesmo a emulação de gráficos 3D a partir de gráficos 2D.

See the Pen CSS Animation with steps() by Guil H (@Guilh) on CodePen.

Adicionalmente e com a mais recente especificação HTML5, surgiram uma série de novas TAGs e APIs que vieram permitir a criação e exibição nativa de animações 2D e 3D com aceleração gráfica dentro do browser. Esta grande evolução veio também eliminar a necessidade de instalar programas adicionais para a criação de páginas web ricas em conteúdos visuais.

See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

Por outro lado a API de WebGL, uma adaptação da API OpenGL ES e uma novidade do HTML5,  veio permitir a criação e exibição de gráficos 2D e 3D num navegador web, com grande desempenho gráfico e sem a necessidade de instalação de quaisquer plugins. A adopção pelos grandes fabricantes de browsers tem sido gradual sendo que, actualmente, é suportada por praticamente todos os navegadores desktop e mobile mais recentes. Esta tecnologia veio, por exemplo, abrir portas à criação de jogos online, com animações fluídas e responsividade sem precedentes.

See the Pen Sakura Animation using WebGl by Frank FitzGerald (@FrankFitzGerald) on CodePen.

Do ponto de vista dos programadores, o aparecimento de bibliotecas como o ThreeJS, ou o BabylonJS vieram facilitar e promover a criação e partilha de conteúdos tridimensionais, até então impensáveis de conseguir implementar dentro de um browser de forma tão ubíqua.

O percurso da animação na web não foi linear, mas olhando em retrospectiva, aparenta estar num bom caminho. Ainda há alguns passos a percorrer, como a constante optimização e adopção destas tecnologias por todos os navegadores, e o esforço adicional de manter a conformidade com a especificação, em todas as tecnologias desenvolvidas.

Posto isto, qual será a melhor forma de criar animações? Depende, obviamente, do que se pretende alcançar. Desde a animação de elementos da página, à criação de pequenos gráficos animados à criação de jogos, seja em 2D ou 3D, as escolhas de bibliotecas para facilitar o desenvolvimento são muitas e com diferentes pontos fortes, mas todas elas têm algo em comum: a possibilidade de tirar partido das mais recentes funcionalidades nativas do browser para oferecer uma experiência de utilizador rica e fluída.

A equipa TeamEffort, possui os conhecimentos necessários para o informar e auxiliar neste processo de escolha. Contacte-nos e deixe a criatividade animar a experiência de quem visita o seu site.