Dhyan ShanasaNo passado, construir animações complexas para Android, iOS e React Native apps era um processo difícil e longo. Precisávamos adicionar imagens pesadas para cada dimensão de tela ou escrever milhares de linhas de códigos – que por vezes eram frágeis e complicados de manter. Por esse motivo, muitos apps atuais não usam animações, mesmo que isso seja uma poderosa ferramenta para comunicar ideias e criar experiências completas.
Agora, contudo, uma nova ferramenta surge para solucionar essa etapa: trata-se do Lottie, um tipo de biblioteca para iOS, Android e React Native que renderiza animações do After Effects em tempo real, permitindo que apps usem animações de maneira tão simples como usam imagens estáticas. O Lottie usa dados exportados de uma extensão open-source chamada Bodymovin, em arquivos JSON. A extensão possui um player JavaScript que renderiza animações direto na web. Desde fevereiro de 2015, o criador do Bodymovin – Hernan Torrisi – criou uma fundação sólida para adicionar funcionalidades e melhorias no plug-in. Com isso, os desenvolvedores do Lottie (Brandon Withrow no iOS, Gabriel Peal no Android, Leland Richardson no React Native e Salih Abdul-Karim em Design) começaram a construir sua ferramenta em cima do trabalho fenomenal de Torrisi.
Alguns exemplos das animações geradas pelo Lottie – via Medium
Crie animações detalhadas com maciez
[cl-review quote=”Antes você tinha que reescrever, adivinhar a duração, criar manualmente a maciez das curvas e recriar animações com nada mais que uma Gif como referência. Com o Lottie, queremos que isso seja coisa do passado.” author=”Salih Abdul-Karim” occupation=”Co-Criador do Lottie” source=”url:https%3A%2F%2Ftwitter.com%2Ftherealsalih%3Flang%3Den|target:_blank”]
Alguns exemplos das animações geradas pelo Lottie – via Medium
Os criadores do Lottie comentam que seu intento é suportar cada vez mais funções do After Effects (gradientes, tipografia, imagens específicas e até mesmo o RubberHose), permitindo assim que se anime mais itens da interface dos apps. Além disso, os caras já começaram a vender vários tipos de animações como notificações in-app, ilustrações animadas em tela cheia e página de review.
Comunidade em crescimento
[cl-review quote=”Liberar algo como open-source é mais do que simplesmente deixar solto pra quem quer usar. É uma ponte que conecta as pessoas e cria comunidade. À medida que se aproxima a hora do Lottie ser liberado para designers e engenheiros via GitHub, nós queremos que artistas da animação também estejam conectados. Nós nos inspiramos em projetos como 9 Squares, Motion Corpse e Animography, pois todos os três conectam pessoas do mundo todo para colaborar em um projeto de animação pública. Assim, entramos em contato com os criadores dos três projetos e disponibilizaremos um trecho de suas animações no app. Dessa forma, temos uma animação de J.R. Canest, uma de Al Boardman e uma tipografia animada Mobilo do Animography. ” author=”Salih Abdul-Karim” occupation=”Co-Criador do Lottie”]
Da esquerda pra direita: Jr.canest no Motion Corpse, Al Boardman do 9 Squares, Mobilo animated typeface
Aos interessados em baixar o Lottie, basta seguir os respectivos links:
Bodymovin
iOS
Android
React Native
Fonte: Medium | Dica por Capo Luiz via Facebook