Entre em Contato
contato@uxmotiondesign.com
Voltar

Bodymovin, Lottie, e as Possibilidades do Motion Além do Formato de Vídeo

O mundo do UX Motion Design te possibilita trabalhar em diferentes formatos. Se você for trabalhar mais diretamente com Explainer Video(vídeo explicativo) ou vídeos How it Works(como funciona), o arquivo final será o clássico .mov ou .mp4 em que estamos acostumados a trabalhar.

A coisa complica quando pensamos em exportar nossas animações para outros formatos, como a web, softwares, e apps. Como já falamos anteriormente, até pouco tempo atrás, para um Motion Designer criar animações para esses meios, ele dependia de um programador, ou dele mesmo saber programar. Mais recentemente, com o desenvolvimento e evolução constante do Bodymovin e do Lottie, o Motion Designer consegue criar animações para Apps e para a Web de forma muito mais intuitiva.

O que é o Bodymovin?

Você já deve ter lido várias vezes comentarmos sobre o Bodymovin e até agora ainda não entendeu direito o que ele é, né? A realidade é que o Bodymovin é bem simples. Ele é uma extensão pro After Effects que cria diversas opções novas de render, voltadas para a parte de web e apps, que os renders nativos do After Effects não possibilitam.

Uma maneira fácil de entender o que ele faz, seria pensar sobre o render comum que costumamos fazer, aonde configuramos as especificações, e podemos ali gerar diferentes arquivos como sequência PNG, vídeo .MOV, .MP4, entre outros. O Bodymovin exerce essa mesma função, só que ao invés dos formatos de vídeo e imagem, ele vai gerar para nós, arquivos em código.

Como ele expande as possibilidades de animação?

Por mais que ele parece algo bem simples (e na realidade ele é), o Bodymovin cria um novo universo de possibilidade para Motion Designers e desenvolvedores. Ao invés de termos o programador precisando aprender animação, ou o motion designer precisando aprender programação, agora, os dois conseguem trabalhar lado a lado de forma flúida, usando o potencial máximo do conhecimento de cada um.

Não é atoa que as animações para web e apps no geral sempre foram muito duras e rígidas, pois faltava ali um conhecimento que só quem se dedica ao Motion Design era capaz de ter. Agora, com a possibilidade de exportar as animações em código, o Motion Designer consegue focar naquilo que ele faz de melhor. As animações são mais fluidas e complexas, e os programadores conseguem incorporar isso no código sem maiores dificuldades.

O que é o Lottie

O Lottie, desenvolvido pela equipe de Motion Design do Airbnb, transporta aquilo que o Bodymovin consegue exportar em código, para o mundo mobile(de dispositivos móveis). O Lottie funciona como essa ponte que conecta os sistemas Android e iOS com o After Effects e aquilo que ele exporta através do Bodymovin.

A grande vantagem do Lottie associado ao Bodymovin, é que uma mesma animação exportada, funciona nas diferentes plataformas, sem que precise saber converter algum arquivo ou reprogramá-lo para que ele funcione exatamente igual no Android e no iOS.

O que teremos para o futuro?

Como eu falei, essas ferramentas trouxeram novas possibilidades para os Motion Designers, mas principalmente elas são forte aliadas à experiência que os usuários de apps e plataformas web começarão a ter a partir disso. Conforme formos tendo cada vez mais Motion Designers focados nessa área, começaremos a ver uma revolução nos aplicativos e plataformas que usamos todos os dias.

O Motion Design já está, e estará cada vez mais presente em nossas vidas.

Atualmente, tanto o Bodymovin quanto o Lottie possuem limitações, o que é normal quando pensamos na relação da experiência do usuário. Afinal, para que as animações funcionem bem em uma interface, elas precisam acima de tudo ter uma boa performance. De nada adianta criarmos uma animação se ela for deixar um aplicativo pesado ou se ela não tocar no framerate em que ela foi planejada.

Conforme a tecnologia e essas ferramentas evoluem, vamos ver uma possibilidade cada vez maior do que podemos criar em termos de animação. Com isso, a interação entre o After Effects e estas novas plataformas, será muito mais natural. Nos resta ficar de olho, absorver essas novas possibilidades e crescer conforme esta tecnologia também cresce.

O Bodymovin e o Lottie são grandes aliados do UX Motion Designer, e não existe época melhor do que a em que estamos vivendo para se focar nesse nicho.

Felippe Silveira
Felippe Silveira
Co-Fundador do UX Motion Design, da MOWE Studio (Estados Unidos) e Mestre em Motion Design pela BAU School of Design (Espanha) encarregado de projetos de Motion para clientes como: Google, Adobe, Pepsico, Pfizer, Zeplin, entre outros.