A nova era de animações mobile com Lottie!

Alain Tramont
Share! por Ateliê de Software
3 min readJun 22, 2017

--

N o início da minha carreira de designer fui fisgado pelo mundo da animação 3d, o que me levou a consumir vários livros e horas atrás de horas para aprender os softwares 3d Studio Max e o apaixonante Maya. O tempo passou, as demandas levaram meu foco para o desenvolvimento web, até que a Adobe apareceu com um tal de After Effects.

Foi suficiente para trazer toda a minha paixão de volta. Timeline, 3 eixos espaciais, um palco novo para eu animar as ideias e uma proposta que atendia ao mercado publicitário no qual eu estava mais envolvido na época — era tudo o que eu queria!

Hoje os tempos são outros, o foco mudou novamente e estamos na era do boom dos aplicativos mobile. E quem pôs um novo brilho em meus olhos foi uma empresa que à primeira vista não nos lembra uma empresa que desenvolve tecnologia, apesar de ser uma das maiores startups do mundo: o Airbnb.

Os desenvolvedores de lá andam trabalhando com a comunidade open source, desenvolvendo novas tecnologias, atingindo diferentes mercados e agora nos surpreenderam com a criação da Lottie: uma biblioteca iOS, Android e React Native que transforma animações criadas em After Effects em animações para aplicativos mobile, tornando a experiência do usuário muito mais rica e engajada.

Será que fica pesado?

A Lottie chegou para finalmente trazer as animações para o universo mobile e decretar o fim dos tempos em que era necessário um conjunto de passos para incluir animações .GIF em aplicativos, o que desmotivava o uso por desenvolvedores e principalmente a criação de animações mais elaboradas por designers.

E como a Lottie faz isso? As animações são exportadas do After Effects como um arquivo JSON através de uma extensão open source do software chamada Bodymovin. Animações em arquivos JSON significam arquivos levíssimos. A Lottie então renderiza a animação contida no JSON nativamente através do React Native. Além disso, ela possui várias APIs, oferece a possibilidade de carregamento de arquivos JSON na rede e conta com otimização via caching para animações usadas frequentemente. É possível até unir uma animação nativa do iOS ao JSON para construir animações ainda mais complexas, por exemplo.

Segundo os criadores da Lottie, agora os desenvolvedores podem usar exatamente o que o designer entregou sem ter que realizar etapas extras para incluir animações nos projetos.

Planos para o futuro

A Lottie ainda tem pouco tempo, mas planos ambiciosos. A ideia é que a integração com recursos do After Effects seja ampliada ao máximo e isso significa um novo mundo de interações e inúmeras possibilidades de experiências do usuário. É só o começo!

Encontre mais:

Animações Lottie gratuitas

Lottie para React Native

Lottie para iOS:

Lottie para Android:

ASSINE NOSSA NEWSLETTER! E fique por dentro de tudo o que acontece no Ateliê de Software da Webgoal.

Dê um alô pra gente! E nos acompanhe nas redes sociais:
Email: contato@atelie.software
Site
Facebook
Instagram
Twitter
Youtube

--

--