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.
