[vc_row][vc_column][vc_column_text]A Lottie é uma biblioteca desenvolvida pela Airbnb que é utilizada para adicionar animações em sites e aplicativos. Ela trabalha em conjunto com um plugin do After Effects chamado Bodymovin que tem a função de converter a animação criada para um objeto JSON. Pensando nisso, neste artigo, vamos aprender como utilizar animações Lottie com React.
[adrotate banner=”4″]
Por que utilizar animações Lottie com React?
Existem muitas vantagens em utilizar animações Lottie com React. Com a Lottie, podemos adicionar animações em nossos projetos que são facilmente manipuláveis através de propriedades.
Assim, essa biblioteca possui ótima qualidade, desempenho e fluidez, tendo um tamanho bem inferior quando comparada com a utilização de PNG e GIF. Além disso, a Lottie aumenta a velocidade de download e economiza memória.
Como utilizá-la?
Criamos um passo a passo para utilização de animações Lottie com React. Então vamos conferir?
1. Escolher a Animação
Primeiramente, precisamos criar uma conta no site da Lottie para ter acesso às animações. Fazendo isso, já teremos acesso a diversas animações gratuitas. Assim, escolha a animação que preferir e faça o download do arquivo JSON.
2. Adicionar a Lottie ao projeto React
Com a nossa aplicação React já criada, devemos instalar a biblioteca react-lottie com o seguinte comando:
- Se estiver utilizando npm:
npm install react-lottie
- Se estiver utilizando yarn:
yarn add react-lottie
Depois disso, se estiver utilizando Typescript, instale a tipagem do react-lottie com o seguinte comando:
- Se estiver utilizando npm:
npm install –save-dev @types/react-lottie
- Se estiver utilizando yarn:
yarn add @types/react-lottie -D
3. Utilizar a Biblioteca
Adicionar animações
Devemos adicionar as animações baixadas em JSON ao nosso projeto. Para isso, podemos criar um diretório chamado animations e adicioná-las dentro dele, como o exemplo a seguir:
Importação do arquivo
Precisamos realizar a importação do nosso arquivo JSON e da Lottie no componente em que utilizaremos a animação. Dessa forma, no exemplo abaixo, estamos importando uma animação de carregamento que chamamos de “loadingAnimation”.
Adicionar componente
Agora, devemos adicionar o nosso componente Lottie que deverá obrigatoriamente ter uma propriedade chamada “options”. Assim, ele irá conter um objeto com a chave animationData, que deverá receber o arquivo JSON da nossa animação que foi importado. Dessa forma:
Com isso, já teremos este resultado:
Adicionar propriedades
Perceba que a animação está em loop (é um comportamento default que pode ser alterado adicionando a chave “loop” que recebe um booleano ao objeto de “options”), sendo pausada ao ser clicada. Porém, esse não é o comportamento que desejamos, já que estamos utilizando uma animação de carregamento.
Então, vamos resolver esse problema e adicionar mais propriedades à animação.
Mudar o comportamento de pause
Para mudar o comportamento de pause, adicionamos a propriedade “isClickToPauseDisabled” recebendo true. Dessa forma, também adicionamos as principais propriedades que a nossa animação pode receber, que são:
- isPaused: define se está pausada ou não (ao pausar, a animação fica no frame em que foi pausada);
- isStopped: define se está parada ou não (ao parar, a animação fica no frame inicial);
- direction: define se a animação vai seguir o fluxo normal ou se irá ser reproduzida de trás para frente (1 ou -1);
- speed: define a velocidade da animação;
- height: define a altura da imagem;
- width: define a largura da imagem;
- options: recebe um objeto que pode possuir a chave loop e autoplay, que definem, respectivamente, se queremos que a animação nunca pare e se ela começará instantaneamente.
Criar animações avançadas
Com isso, temos a nossa animação de carregamento funcionando perfeitamente! Agora, com esse conhecimento, podemos criar animações mais avançadas, utilizando estados para controlar as propriedades da nossa animação. Por exemplo:
Conclusão
Utilizar animações Lottie com React pode melhorar muito o seu site ou aplicativo. Pensando nisso, confira o repositório contendo todas as animações clicando aqui.
[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]
Leia também:
Como automatizar a criação de componentes funcionais em ReactJs
