Animar sua interface não precisa mais ser uma dor de cabeça!
Foi-se a época em que micro-interações & motion graphics eram um pesadelo para designers e desenvolvedores.
Há mais de um ano atrás, escrevi um medium sobre a otimização de imagens animadas para websites através de um meio alternativo com a incorporação de MP4s:
No entanto, pouco depois que publiquei, descobri a existência de outra maneira, por incrível que pareça, milhares de vezes melhor.
Fizemos diversos testes aqui na Equals e hoje podemos contar para vocês como foi e o quanto tem sido produtivo para todos da equipe, desde designers a desenvolvedores.
Sem enrolação, o Lottie é um framework desenvolvido pela AirBnb, que possibilita exportar um motion graphic criado no After Effects em JSON.
"Easily add high-quality animation to any native app.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images."
Parece insano, mas ele converte todas as instruções configuradas na Composition do AFX em diversas coordenadas vinculadas ao shape, salvando sua animação em um arquivo de texto tão leve que parece mágica. Além disso, este arquivo, quando incorporado, se comporta como um SVG, ou seja… resolução não será um problema!
Contextualizando a situação, porque precisamos pensar em incluir micro-interações no nosso produto?
No sentido literal, micro-interações são pequenas interações capazes de te dar a visibilidade de um estado ou a possibilidade de completar alguma tarefa. E durante muito tempo, traduzir em código as animações criadas por designers para representar estes momentos, foi tão complicado que acabou sendo deixado de lado.
Entretanto, com o passar dos anos, muitos produtos considerados referência começaram a fazer dessa prática algo comum, o que influenciou diretamente as tendências de design, chamando a atenção de todos novamente.
Os ganhos através dessa prática são imensos:
- Prevenção de erros
- Visibilidade de estado
- Fluidez na interface
- Elevação do valor visual
- Interfaces menos entediantes
Sendo assim, após muitas iterações, enxergamos o momento de trazer para o nosso App esse novo recurso.
Primeiros passos
Para começar a fazer animações que sigam o guideline de design da sua empresa, é muito importante que você tenha o After Effects e algum software de vetorização instalado na sua máquina.
Não deixe a falta de experiência com a ferramenta ser uma barreira para sua criatividade! Nenhum designer é especialista em todas as ferramentas do mercado ;)
Ainda assim, é sempre bom lembrar que para construir animações mais fluidas e complexas é necessária a ajuda de um especialista em motion, mas como sabemos o quanto é escasso, precisamos aprender a quebrar o galho de vez em quando.
Na pior das hipóteses, se você não tiver designers no seu time, não se sinta limitado! Escolha o que você gostar no Lootie Files e use gratuitamente.
Agora que estamos alinhados, tenha em mãos o vetor que você quer trabalhar, de preferência no Illustrator, pois a Adobe Suite conversa melhor entre si, e importe no After FX para fazer sua mágica.
Meu objetivo não é ensinar a criar animações, mas como fazer delas um entregável que seja fácil de implementar pelo seu time de engenharia.
Alguns tutoriais podem te ajudar com isso:
Tenho uma animação, e agora?
Certo, agora você precisa instalar o body movin como extensão do seu After FX através do ZXPInstaller. Abaixo o GitHub do projeto com todas as instruções necessárias:
Recomendo a opção 1:
Download it from from aescripts + aeplugins: http://aescripts.com/bodymovin/
Exportando o resultado para JSON!
Após seguir todas as instruções técnicas, chegou a hora de ver funcionando, só para não desmotivar 😂.
- Dentro do After FX, vá até "Window > Extensions > Body Movin"
- Agora selecione a Composition que você quer exportar (importante que tudo esteja em shapes, conforme o tutorial acima), defina a pasta para o arquivo final e clique em Render.
Provavelmente você vai se deparar com essa mensagem a primeira vez, mas não se preocupe, é só seguir o que ela diz:
Could not write file.
Make sure you have enabled scripts to write files.
Edit > Preferences > General > Allow Scripts to Write Files and Access Network
Hora de ver o resultado!
Abra o Lootie Files, baixe o app oficial do Lottie no seu celular, arraste o JSON para o website e mire sua câmera no QRCode gerado. ✨
As integrações funcionam tão bem que chega a parecer mentira!
Antes de finalizar, lembre sempre de testar o arquivo gerado, pois as vezes as formas que você utilizou podem ficar quebradas caso você pule alguma etapa da criação.
A melhor parte: Envie o arquivo para o time de desenvolvimento!
Aqui na Equals o pessoal se adaptou muito bem com o Lottie. Além da documentação extremamente didática, a forma de utilizar também é muito simples.
Costumamos utilizar o arquivo como um asset do projeto, então quando é necessário alguma manutenção só substituimos.
Entender a dinâmica desse framework pode elevar muito a experiência do seu produto se utilizado com sabedoria, portanto, a sinergia de designers e desenvolvedores neste momento é fundamental.
Além disso, vocês vão encontrar diversas maneiras de manipular a animação via código, então deixe a criatividade trabalhar!
Veja outros exemplos que utilizamos o Lottie
Ignorem a qualidade dos gifs, infelizmente não é possível hospedar vídeos.
Além do Lottie, temos desenvolvido várias outras interações em componentes nativos, como por exemplo o efeito suave de abertura de uma caixa expansível ou a transição entre abas demonstrando sutilmente para o usuário o que sua interação está executando.
Concluindo, é muito importante que saibamos o valor de uma boa micro-interação e o poder que ela tem de engrandecer a experiência. E mais, isso tudo só é executado com excelência se toda a equipe estiver em sintonia e enxergar que no final o valor maior está no resultado entregue para o cliente ;)
Quer ver um exemplo legal de tudo isso que conversamos? Clica aí na palminha! 🤭
Espero ter contribuído,
forte abraço e até a próxima!
Website | Linkedin | Instagram | Dribbble | Behance | Github
