Como utilizar animações Lottie com React

[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]