Como unificar animações para web e mobile em um arquivo único .JSON sem codar nada.
Quando nós, designers, pensamos em animação para aplicativos ou sistemas, a primeira coisa que vem na cabeça é muitas linhas de código e horas de curva de aprendizado para executar algo assim não é? Ou, na dependência de um desenvolvedor com esse conhecimento para aplicar em um fluxo de tela ou em algum feedback específico. O problema dessa segunda parte é como manter exatamente a mesma interação que você prototipou em questões de timming, velocidade e qualidade.
Como enfrentar esses problemas quando surge a necessidade de ter esse tipo de interação? Foi o que aconteceu conosco, nossos designers não tem conhecimento técnico para criar animações via código e não tinhamos tempo para a curva de aprendizado que o projeto demandava. Então, recorremos aos devs para alinhar o conhecimento deles em animações. Para nossa alegria, a maioria curte muito, mas não fazia esse trabalho com frequência, pois até então não tinhamos demanda. Alguns já tinham brincado com animações usando o Anime.js, e possuíam algum conhecimento, mas não ao nível que precisávamos. Pensamos, e agora?
Pesquisar...
Precisávamos dividir os papéis de alguma maneira. Designers animam, programadores programam, e tudo tem que sair como queremos, para todas as plataformas, iOS, Android e Web, do contrário seria (esforço/$/tempo) jogado fora e uma experiência ruim para nossos usuários. Depois de muita pesquisa, para a nossa sorte…
Airbnb Design!
Exatamente! Pra quem não conhece, esses caras tem um canal fantástico de design que você pode acessar aqui. Eles resolveram nossos problemas com animações multiplataformas e divisão de papéis. Criando uma biblioteca open-source para animações chamada Lottie que resumidamente permite você criar animações no After Effects e exportar para um arquivo .json que pode ser utilizado junto a biblioteca deles em Android, iOS e Web. :D
Usando a Lottie, conseguimos fazer com que nossos designers prototipassem e animassem nossas interações em ferramentas de design como Illustrator, After Effects, Sketch, nada de código, e os desenvolvedores aplicassem o .json gerado nas nossas plataformas. Tudo isso com um tamanho minúsculo de arquivo e mantendo a qualidade que esperávamos.
Como funciona
Junto com um dos nossos devs mobile Guilherme Panizzon resolvi botar a mão na massa e ver no que ia dar.
Lançamos em outubro de 2017 um novo recurso que tem um alcance em todas as plataformas. Em alguns momentos específicos desse recurso, os usuários interagem com algumas animações, uma delas vou compartilhar aqui. Lembrando que, essa animação foi feita apenas uma vez no After Effects e o mesmo arquivo .json foi utilizado em todas as plataformas, e a animação ficou perfeita em todas elas.
Tudo que você vai precisar saber para usar, está no site do Lottie, mas se você é agoniado e quiser um resumo bem rápido de como funciona, leia tudo abaixo:
Exemplo Web:
Para tudo funcionar como tem que funcionar, vou dar uma dica muito importante que no site é difícil de achar. Quando você criar sua animação, lembre-se que ela não pode utilizar plugins do After para acontecer, tudo tem que ser gerado em timeline por você mesmo. É como animar no antigo Flash. Animação com shapes. Se você utilizar plugins de terceiros não vai rolar, porque o Lottie tem um exportador próprio e não utiliza o save do After para criar o arquivo .json. A dinâmica foi… Criar o projeto no Sketch, abrir no Illustrator, separar tudo em camadas, abrir o arquivo .ai no After Effects.
Aprendi isso na marra!
PS: Atualizei o artigo com essa dica que recebi do Luiz Alves: Para quem quer fazer as ilustrações e o protótipo no sketch sem precisar passar pelo Illustrator, acessa esse artigo aqui no Medium do Google Design. https://medium.com/google-design/bringing-sketch-and-after-effects-closer-together-d83b3e729c93
Segue um exemplo pronto da animação do exemplo acima para você ver o que estou falando. Arquivo .eap.
OBS: Veja o HTML, CSS e JS gerado, basicamente o desenvolvedor importa a biblioteca para a plataforma e aplica o .json onde a animação tiver que acontecer. Como é um arquivo editável, você ou o desenvolvedor podem manipular a animação como quiserem via código, e isso abre portas para o infinito, mais abaixo tem exemplo disso.
Usamos essa animação sempre que o vendedor bate a meta do mês, veja a aplicação dela levando a mesma experiência para nossos usuários em todas as plataformas.
Para você brilhar os olhos do desenvolvedor do seu time, O Guilherme Panizzon vai escrever daqui para baixo compartilhando um trecho de como essa animação é adicionada nos aplicativos.
Exemplo Mobile
O uso da Lottie é muito similar em ambas as plataformas (Android e iOS). Nesse exemplo abaixo, vamos demonstrar como ela pode ser incorporada no Android. Você pode ver a documentação completa para o iOS aqui e Android aqui.
A Lottie pode ser utilizada a partir da API 14 do Android, tal que é muito simples incorporar a biblioteca na aplicação. A forma mais comum é através de uma dependência do arquivo build.gradle.
dependencies {
compile 'com.airbnb.android:lottie:2.3.0'
}Em seguida, é necessário utilizar a classe LottieAnimationView. As duas abordagens comumente utilizadas é programaticamente ou via xml layout.
Com apenas esse trecho já é possível ver a mágica acontecendo. Vale mencionar que a biblioteca disponibiliza uma série de eventos, sendo possível até mesmo manipular o estado dos elementos do arquivo .json que foi gerado dentro do After Effects, como: velocidade, cor, transição, forma, timming e outros.
Conclusão
Voltando ao início do artigo quando comentei sobre os problemas de adicionar animações em microinterações ou no fluxo da experiência, se olharmos a biblioteca Lottie como uma ferramenta para dividir os papéis, ela resolve muito bem o problema, pois mantém o time de design focado na animação e em como será a UX, não precisando da curva de aprendizado para executá-la. Já o desenvolvedor consegue focar nas regras de negócio e fazer a manipulação necessária para a interação funcionar com o resto do sistema, não tendo retrabalho fazendo ajustes para o time de design e produto. Bacana né? Agora é mão na massa!
Obrigado Guilherme Panizzon pela ajuda técnica no artigo.
