Fazer animações para TV, Internet, Cinema, ou qualquer plataforma em formato de vídeo é algo muito comum para todos os Motion Designers. Abrimos o After Effects, colocamos nossos Keyframes, ajustamos o Graph Editor, mandamos fazer o render e… voilá! Está pronta e exportada a animação para estas mídias.
Porém, existe uma outra galera que por muito tempo também animou, em um processo que não é nem um pouco simples, e sim, muito desafiador. Estou falando dos programadores e o trabalho deles de animar para a Web e aplicativos.
O desafio de se animar pra web e apps em código
Quando falamos de web, aplicativos, celulares, etc, o processo de animação não é tão simples assim. Enquanto a interface do After Effects pode parecer algo de outro mundo para quem abre o software pela primeira vez, não demora muito tempo para que você se habitue e veja que o After pode ser bastante “amigável”.
A forma como o After Effects funciona acaba se tornando bem intuitiva para os Motion Designers. Sabemos exatamente o resultado que vamos alcançar ao clicar nos botões corretos e temos ali em nossa frente já um feedback visual imediato do que estamos fazendo. Porém, com as opções de exportação limitadas à formatos de vídeo e sequência de imagens, isso se torna inviável para plataformas web e de aplicativos.
Isto acontece porque todas estas plataformas trabalham muito com a questão da velocidade e desempenho de suas interfaces. É necessário que tudo ali apareça para o usuário de forma rápida e prazerosa.
Se precisássemos carregar um vídeo toda vez que entrássemos em uma página da Web, nossa experiência seria péssima e provavelmente evitaríamos usar muitas destas páginas.
É aí que entra a animação feita em programação. Diferente do After Effects, ao invés de termos o Motion Designer atuando e desenvolvendo aquilo que eles mais tem conhecimento, agora temos o programador criando (ou tentando replicar alguma animação) usando apenas código.
Os Diferentes mundos de programação e Animação
Animação e programação são dois mundos distintos, principalmente se teu foco é o design. A linguagem de programação é como aprender uma nova língua, e a resposta àquilo que você está fazendo, nem sempre é de imediato — é necessário “finalizar” todo o código para se ver a animação acontecendo.
O grande problema aí, é que para o Motion Designer, ter que aprender a programar para criar animações para aplicativos ou web, é uma tarefa muito árdua. Muitas horas, muitas semanas e muitos meses dedicando-se a entender como a programação funciona e principalmente como replicar a animação dentro do código.
Para o programador, replicar ou criar uma animação de qualidade, depende muito da presença de um Motion Designer para ajudá-lo a definir timings corretos e todas as acelerações e desacelerações necessárias. Em grandes empresas, essas duas equipes trabalham em conjunto e possibilitam que isso aconteça. Entretanto, em empresas menores e até mesmo para estúdios e freelancers Motion Designers, conseguir um programador que entenda de animação para que se possa dar a direção correta, era basicamente impossível, além de gerar um custo maior de produção.
A dificuldade de se ver boas animações na Web
Como muitas das vezes os programadores eram os responsáveis pelas animações, sem o suporte de um Motion Designer como grandes empresas costumam ter, todo o conhecimento sobre animação tinha que partir dele mesmo. Animadores e Motion Designers sabem que esta área é uma daquelas em que podemos passar toda nossa vida aprimorando nossa técnica, e ela nunca será perfeita. Como na programação, animação é um mundo por si só e é necessário bastante dedicação e conhecimento para que comecemos a criar animações boas.
Desse modo, os programadores necessitavam ter um conhecimento em uma área que não era o foco deles e com isso as animações normalmente costumam ser bem fracas.
Cheguei a ver em alguns sites até mesmo uma base dos princípios de animação, como o uso de overshoots por exemplo, porém muito mal aplicados por faltar conhecimento.
Não vejo esse ponto como uma falha dos programadores. Reconheço que esta não é a principal área deles e que eles não precisam ter todo o conhecimento que os Motion Designers tem. Porém, sempre me intrigou como os Motion Designers conseguiriam atuar nesta parte de forma que fosse mais intuitiva com o dia-a-dia deles.
Novas possibilidades para a animação na Web
Nos últimos anos, vimos uma demanda cada vez maior de ferramentas que auxiliassem Motion Designers a produzir para estas mídias. Recentemente chegou no mercado um script Open Source, que possibilitou que isso acontecesse de forma mais intuitiva — o Bodymovin. Outros scripts, plugins e softwares também existem/existiram, mas o Bodymovin tem recebido bastante destaque, principalmente por ser Open Source.
Com ele, é possível renderizar direto do After para código, o que torna a vida tanto do programador como do Motion Designer muito mais fácil quando se quer exportar uma animação para a web. Junto do Bodymovin, uma equipe de Motion do Airbnb desenvolveu o Lottie que utiliza do Bodymovin para exportar animações para celular.
Estas duas ferramentas estão sendo muito bem aceita pela comunidade de Motion que produz animação para UI e UX, além de atraírem bastante os olhares de desenvolvedores para que elas se aprimorem cada vez mais. Acredito que em pouco tempo, teremos esse processo de animação para web cada vez mais sútil e fácil, da mesma maneira como produzimos animações para o formato de vídeo.
Parte do futuro da animação está nas interfaces, e é buscando todo esse conhecimento por agora que vamos conseguir nos preparar e ser mais capacitados para as necessidades do futuro.
