Concrete Logo
Hamburger button

Desmitificando a animação com o Lottie

  • Blog
  • 24 de Setembro de 2018

Monstros existem não só no lago Ness. Para alguns, existem também quando se ouve a palavra animação. Programadores chegam até terminar o expediente mais cedo.

Brincadeiras à parte, mas… atire a primeira pedra o designer que nunca tenha ficado frustrado com o uso recorrente de imagens estáticas ou animações muito básicas.

Obviamente reproduzir animações de uma forma fluida e coerente em um produto não é uma tarefa fácil pra ninguém, seja para o designer (que entende o quão complexa é a concepção dos nossos “monstrinhos do Lago Ness”) ou para o desenvolvedor (que vai recriá-las via código).

Felizmente o Airbnb nos presenteou com o Lottie, uma biblioteca que devolve o poder da animação aos designers.

Neste post, vamos compartilhar um pouco da nossa experiência e como a parceria entre designer e dev foi essencial para que tudo funcionasse bem.

O que é

Fonte

Como já falamos, o Lottie é uma biblioteca criada pelo Airbnb com o objetivo de renderizar e reproduzir as temidas animações para as plataformas Android, iOS e Web, reduzindo a complexidade de código produzida pelos desenvolvedores.

Com ela, o designer faz a animação no After Effects e com o auxílio de um plugin chamado Bodymoving, a exporta em um modelo vetorial no formato Json.

Fonte

Como fazer funcionar

Fonte

Para começar, é necessário instalar o plugin do After Effects, Bodymoving (instruções de instalação e links de download aqui). Tendo o plugin instalado, é só começar a estruturar a animação.

OBS: No meu caso, utilizei o pacote Adobe para criar as animações. É possível também utilizar o Haiku para animar e o Sketch para vetorizar, mas fica a critério de cada um escolher as ferramentas.

Como estruturar a animação

Para obter animações leves, os vetores são a salvação, principalmente quando estamos falando de mobile. São facilmente escaláveis para densidades diferentes de telas, sem perda de qualidade e sem ter que gerar vários assets para cada tamanho de tela.

O Illustrator foi a ferramenta que escolhi para preparar as ilustrações que pretendia animar. Nele, organizei o desenho em camadas, separando as partes “animáveis” para conseguir movê-las de forma independente. A dica é deixar o tamanho da ilustração o mais fiel possível ao resultado desejado para não ter retrabalho.

Outro ponto importante: não utilize efeitos e máscaras! O Lottie não os interpreta e até mesmo em ilustrações estáticas eles causam problemas na renderização. Quando estiver tudo preparado, é hora de salvar o arquivo Ai e abrir o After Effects.

No After, basta importar o arquivo do Illustrator para a composição criada e já vai ficar tudo bem encaminhado para começarmos a animar. É importante ressaltar: após importar o arquivo Ai, é necessário transformá-lo em curvas do After Effects para a animação final realmente ser vetorial.

Caso contrário, o output vai ser uma sequência de imagens, o que acaba com o sentido de estarmos tendo todo esse trabalho. Agora é que metemos a mão na massa de verdade! Essa é a hora de gastar as habilidades de animar.

Aqui tem um tutorial mais detalhado de como preparar uma animação com perfeição. 😉

Como exportar o json

Ao finalizar sua animação, chega a hora de finalmente exportar o mágico json. No After Effects, vá em Window > Extensions > Bodymovin. A tela do plugin vai se abrir e agora é só escolher onde quer que o json seja salvo, nomear o arquivo e renderizar. Seguindo estes passos, você vai ter o json pronto para ser testado e aplicado.

Fonte

Dúvidas? Olha aqui a ajudinha. 😉

Porque é vantagem utilizá-lo

De uma maneira geral é sempre bom avaliar a necessidade de inclusão de bibliotecas ao projeto. Portanto, quando há animações simples, como escala, translação, rotação, fade etc, não há a necessidade de criarmos todo esse processo, certo? Estaríamos matando uma formiga com um canhão. Vejamos o exemplo a seguir:

Fonte

Fonte

Já parou para pensar no nível de complexidade da implementação deste tipo de animação via “braço” (código)?

“Ah, mas não sou desenvolvedor, não faço a mínima ideia.”

Pois é, meus amigos e minhas amigas, esse tipo de animação se torna praticamente inviável de reproduzir programaticamente. Porém, com a nossa grande aliada, toda a complexidade que um programador teria, praticamente deixaria de existir, gerando um belíssimo resultado.

A importância de testar

Exemplo de animação com perda de frames

Beleza, animação feita, designer orgulhoso, suor escorrendo pelos seus olhos, tá todo mundo feliz… Porém, quando o desenvolvedor a inclui na biblioteca e executa o projeto, nossa queridinha está travada (não roda nos seus 60 fps). E agora, José?!

A grande dica é: não implemente a animação sem checar sua performance de renderização. Existe um analisador de desempenho da animação feito pelos criadores da biblioteca (não deixe de usá-lo!). Tatuou a dica no braço? Então vamos prosseguir.

Fonte

Aprendemos essa lição nos dando mal. Antes de testar já colocamos na aplicação e era notória a perda de frames. Parecia pesada demais. E de fato era uma animação com muitos detalhes, então pensamos: se diminuirmos a quantidade de detalhes, ela vai ser mais fluida! Correto? Errado.

Depois de muitas tentativas e horas desperdiçadas tentando diminuir a complexidade, nos vimos fracassando em conseguir que ela rodasse lisa. Finalmente testamos no tal aplicativo de análise de performance. Nele, conseguimos ver quais camadas eram mais custosas para renderizar e para a nossa surpresa, era a que tinha elementos totalmente estáticos.

Desempenho da animação e de seus layers

Mas qual o motivo disso? Simplesmente tínhamos um vetor mal preparado por ter sido construído com efeitos e paths complexos lá no Illustrator, toda a animação estava condenada. Na realidade, o problema não era a complexidade da animação, mas sim a complexidade da ilustração.

Já que estamos falando de performance, vale lembrar que, tanto para Android quanto iOS, há um considerado gap quando usamos os queridos merged paths. Pra falar a verdade, o ideal é nem usar, só se por algum motivo for extremamente necessário (̶t̶i̶p̶o̶ ̶e̶n̶t̶r̶e̶g̶a̶r̶ ̶a̶ ̶a̶n̶i̶m̶a̶ç̶ã̶o̶ ̶p̶o̶r̶q̶u̶e̶ ̶v̶a̶i̶ ̶h̶a̶v̶e̶r̶ ̶u̶m̶ ̶a̶t̶a̶q̶u̶e̶ ̶n̶u̶c̶l̶e̶a̶r̶ ̶e̶m̶ ̶5̶ ̶m̶i̶n̶u̶t̶o̶s̶)̶. Lembre-se de evitar ao máximo.

No Android, o uso máscaras e mattes nas animações não é nada recomendado (sério). Se não nos policiarmos no uso desta técnica, com certeza vai haver uma drástica queda de performance. Existem até técnicas de hardware acceleration para reduzir esse problema, mas existem algumas limitações como a falta de suporte ao anti-aliasing, stroke caps e outras dores de cabeça que é bom evitar.

Espero que estejamos de acordo, hein?! Nada de c̶a̶p̶a̶s̶!̶ masks, mattes e merged paths (ao menos evite… para não dizer que não avisamos!).

Conclusão

Viu?! Monstros não existem. É só você não olhar embaixo da cama e cobrir bem os seus pés durante a noite. 🙂

Animações não precisam ser deixadas de lado só porque aparentam serem complexas. Temos um belo aliado em jogo, porém toda a facilidade tem cuidados a serem seguidos, como a avaliação de uso da biblioteca e testes minuciosos nas animações, a fim de garantir fluidez e uma ótima experiência ao usuário final.

Viva la r̶e̶v̶o̶l̶u̶c̶i̶ó̶n̶ animación, carai!

Fonte

Somos parte da Accenture e estamos em constante movimento. Trabalhamos junto às maiores empresas do Brasil para garantir os melhores produtos digitais do mercado. Para isso, usamos design, desenvolvimento ágil e nossa cultura de inovação. Trabalhe com os melhores: concrete.com.br/vagas