Animações do After Effects no React Native com Lottie
Imagine importar qualquer tipo de animação para dentro do React Native de uma forma extremamente leve, ou melhor ainda, utilizando apenas o formato ‘JSON’. Existem softwares especializados em animação que nos possibilitam isso, um deles é o famoso “After Effects”.
O site LottieFiles, na aba “Animations”, lista uma série de animações que podem ser utilizadas como exemplo. O site lista uma série de animações, contendo os mais variados tipos, que podem ser encontrados facilmente através da ferramenta de busca.
Para fazer o dowload do arquivo é bem fácil, basta escolher a animação que gostou, clicar em download e escolher o modo Lottie JSON.
E o mais legal é que você ainda tem algumas opções para customizar sua animação, como no exemplo abaixo:
Ao clicar em “Edit Layer Colors” você ainda tem mais opções para edição da animação escolhida como, velocidade, cor, tamanho e etc…
Dando continuidade ao conteúdo, as animações feitas com After Effects são exportadas através do Bodymovin, uma extensão para o After Effects que permite criar diversas opções novas de render, voltadas para a parte de web e apps, que os renders nativos não possibilitam.
O Bodymovin exporta animações para arquivos json e pngs, no nosso caso ele exporta como JSON e a biblioteca Lottie permite a execução da mesma em Web, Android, iOS e React Native, sendo assim um JSON como esse:
Na imagem abaixo podemos ver a diferença entre um Gif e um Lottie, você pode tirar suas conclusões em questão de resolução e fluidez. Click em “Run Pen” para visualização.
A seguir exemplos de instalação contidos no guia de instalação do módulo do Lottie:
yarn add lottie-react-native
yarn add lottie-ios@3.1.3Ou
npm i --save lottie-react-native
npm i --save lottie-ios@3.1.3Seu funcionamento no React Native é simples, importamos apenas um componente e a animação escolhida como no exemplo a seguir:
Bom, neste caso foi criada uma pasta chamada “animations” e lá dentro está o arquivo de mesmo nome que é nossa animação escolhida, assim podemos importá-la e passá-la para o Lottie de modo mais fácil. Também foi adiconado o ‘autoPlay’ e o ‘loop’ a partir da referência criada. Tudo certo, irá exibir algo assim:
Espero que sirva de ajuda para algum leitor ou desenvolvedor e que assim facilite a implementação de animações em React Native. Obrigado!
Originally published at https://medium.com on January 7, 2022.
