Desmitificando a animação com o Lottie
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 a parte, mas que 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á-la 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 foi essencial para que tudo funcionasse bem.
O que é
Conforme falamos anteriormente, 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 num modelo vetorial no formato json.
Como fazer funcionar
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á 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 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.
Neste link existe 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 se abrirá e agora é só escolher onde quer que o json seja salvo, nomear o arquivo e renderizar. Seguindo estes passos, você terá o json pronto para ser testado e aplicado!
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 e etc., não há a necessidade de criarmos todo esse processo, certo? Estaríamos matando uma formiga com um canhão. Mas vejamos o exemplo a seguir:
Já parou pra pensar o nível de complexidade na 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, este tipo de animação se torna praticamente inviável de reproduzir programaticamente. Porém, com nossa grande aliada, toda complexidade que um programador teria praticamente deixaria de existir, tendo um belíssimo resultado.
A importância de testar
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.
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 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. Para nossa surpresa, era a que possuía elementos totalmente estáticos!
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 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 haverá uma drástica queda de performance. Existem até técnicas de hardware acceleration para reduzir este 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, pra 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 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!
