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.

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.