Como usar animações Lottie em um aplicativo React

O que é um Lottie?

Um Lottie é uma animação codificada em JSON de alta qualidade compatível com Android, iOS, navegadores da web, React e muito mais. Você pode aprender mais sobre o que é um Lottie aqui.

A melhor forma de saber como usar um Lottie é incorporando um. Acompanhe este passo a passo para aprender como incorporar seu Lottie favorito em um aplicativo React.

1.Escolha seu Lottie

Escolha uma animação; uma de sua preferência ou você pode selecionar uma da ampla variedade de animações gratuitas no LottieFiles. Certifique-se de ter sua animação no formato Lottie (.json).

Para este passo a passo, vamos usar esta animação:

2.Configure o ambiente de desenvolvimento React

Você é um fã do Windows, viciado em seu Mac, roda o Ubuntu em um notebook? Bem, isso realmente não importa. Este passo a passo usará o CodeSandbox como o ambiente de desenvolvimento on-line para que qualquer pessoa possa acompanhar de qualquer computador que rode um navegador. Essa sandbox específica renderizará nosso aplicativo para que possamos ver a saída HTML, ou seja, nosso Lottie em ação.

2.1 Inicie um novo projeto do React no CodeSandbox

Isso fornece a você um projeto padrão do React criado com o iniciador oficial do aplicativo create-react.

Agora você tem um aplicativo React novinho em folha no qual começar a criar.

2.2 Adicione o componente React do player de Lottie

Começaremos dando ao seu aplicativo React a capacidade de renderizar seu Lottie adicionando um componente React para renderizar as animações Lottie. Encontre a área "Dependências" no painel esquerdo, use "Adicionar dependência" e procure por react-lottie. Selecione-o nos resultados.

2.3 Adicione a dependência prop-types

Também precisaremos de uma segunda dependência. Pesquise a dependência prop-typese clique em "Adicionar dependência".

3.Aplique seu Lottie

Agora você está pronto para adicionar seu Lottie e editar seu aplicativo React para incluir uma chamada para seu Lottie.

3.1 Crie um diretório para armazenar ativos Lottie

Passe o mouse sobre "src" na caixa de códigos, escolha "Novo diretório" e dê um nome a esses lotties. Dentro dessa pasta, crie um novo arquivo chamado kiss-of-the-heart.json.

Sua sandbox deve ficar assim:

O painel do meio do CodeSandbox exibe este arquivo (vazio).

3.2 Abra sua cópia local do Lottie baixado e cole o Lottie JSON que codifica seu Lottie no painel do meio que exibe esse arquivo.

Os atalhos NB são incríveis, e 3 ajudam você aqui:

• CTRL + A (seleciona tudo)
• CTRL + C (copia tudo)
• CTRL + V (cola tudo)

Seu arquivo deve ficar assim:

4.Use seu Lottie

Último passo. Seu aplicativo React agora precisa usar seu arquivo Lottie usando o componente player de Lottie. Para que isso aconteça, editamos o arquivo App.js.

4.1 Importe o componente player eact-lottie e o arquivo Lottie JSON:

Adicione o seguinte ao início do seu arquivo App.js.

import React from 'react';
import './styles.css';
import Lottie from 'react-lottie';
import animationData from './lotties/kiss-of-the-heart';

Sua lista de importação ficará assim:

4.2 Substitua o código:

por:

export default function App() {
  const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };
  
  return (
    <div>
      <Lottie 
	    options={defaultOptions}
        height={400}
        width={400}
      />
    </div>
  );
}

Tente você

É muito simples usar uma animação Lottie, e temos uma enorme biblioteca de animações no LottieFiles com criações de alguns dos melhores animadores do mercado, e você pode usá-las gratuitamente. Navegue por animações de classe mundial e melhore o visual de suas páginas sem sacrificar o tempo de carregamento.

Quer mais?

Você gostaria de dar ao usuário o controle sobre o comportamento do Lottie? Em caso afirmativo, confira o artigo Controle seu Lottie em um aplicativo React.