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.

Como utilizar animações Lottie com React Luby Software

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:

Como utilizar animações Lottie com React Luby Software

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”.

Como utilizar animações Lottie com React Luby Software

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:

Como utilizar animações Lottie com React Luby Software

Com isso, já teremos este resultado:

Como utilizar animações Lottie com React Luby Software

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.

Como utilizar animações Lottie com React Luby Software

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:

Como utilizar animações Lottie com React Luby Software

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

Rodrigo Gardin

Rodrigo Gardin

CTO da Luby

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco​

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

AWS certifications - AWS Partner
AWS certifications - Solutions Architect
Azure logo - Certifications Luby
Google Cloud Partner logo, a symbol of Luby's certifications and recognitions collaboration with Google.
Copyright ©2024 Luby Software LLC. All rights reserved.
Rolar para cima