A Identidade visual são os elementos que representam: um nome, ideia, produto, empresa, instituição ou serviço. Esse conjunto de elementos pode ser composto por: logotipo, cores, slogan e outros componentes que representam o conceito a ser comunicado. Basicamente, a Identidade Visual, é a imagem da marca.
Quando um desenvolvedor pensa em um aplicativo, na maioria das vezes ele está preocupado com desempenho, organização, manutenção, qualidade e o código em si. Mas quando um designer pensa em um aplicativo, ele pensa na criação de interfaces funcionais, na experiência do usuário, na usabilidade, no conceito que a marca quer criar e muitos outros detalhes que não cabe a um desenvolvedor explicar.
Pensando nessas duas perspectivas, pode acontecer do designer definir para a identidade visual do aplicativo algum componente que seja custoso para o desenvolvimento, como por exemplo, animações no aplicativo. É neste momento que a biblioteca Lottie será usada.
Como a própria biblioteca se define em seu site:
Lottie é uma biblioteca do iOS, Android e React Native que renderiza animações do After Effects em tempo real, permitindo que os aplicativos usem animações com a mesma facilidade com que usam imagens estáticas.
A Lottie carrega e renderiza animações e vetores exportados no formato JSON que podem ser criados e exportados a partir do Adobe After Effects. Sendo assim, os designers podem criar animações sem que seja necessário que um desenvolvedor as recrie à mão no código. Outra vantagem é que a exportação em formato JSON pode trazer animações complexas em um tamanho reduzido de arquivo.
Essas animações podem ser reproduzidas, redimensionadas, aceleradas, desaceleradas, revertidas e muitas outras possibilidades infinitas. As animações podem ser alteradas em tempo de execução de várias maneiras: alterando a cor, posição e muitos outros valores possíveis.
Se o projeto tiver um designer que esteja familiarizado com animações e com o After Effects, será possível criar animações totalmente customizadas. Caso não seja o cenário, a Lottie disponibiliza um repositório alimentado pela comunidade que possui tanto animações grátis, como pagas. Acesse o repositório aqui.
Depois da breve explicação dessa biblioteca tão poderosa, faça a integração com o seu projeto de acordo com as plataformas compatíveis:
- iOS: https://github.com/airbnb/lottie-ios
- Andoird: https://github.com/airbnb/lottie-android
- React Native: https://github.com/lottie-react-native/lottie-react-native
- Web: https://github.com/airbnb/lottie-web