Lottie

Apresentação

O componente Lottie é responsável por exibir animações Lottie em sua aplicação. Ele utiliza a biblioteca @lottiefiles/react-lottie-player para renderizar animações vetoriais de forma eficiente e interativa.

Quando usar

• Para exibir animações vetoriais
• Para criar elementos de loading
• Para adicionar ilustrações animadas
• Para implementar micro-interações
• Para criar animações de transição
• Para exibir animações de sucesso/erro

Forma básica de uso

import { Lottie } from 'eitri-luminus';

// Animação básica
<Lottie
  src="/animations/loading.json"
  autoPlay
  loop
/>

// Animação com tamanho personalizado
<Lottie
  src="/animations/success.json"
  width={200}
  height={200}
  speed={1.5}
/>

// Animação com estilo personalizado
<Lottie
  src="/animations/error.json"
  className="custom-animation"
  style={{ backgroundColor: '#f0f0f0' }}
/>

// Animação sem loop
<Lottie
  src="/animations/notification.json"
  loop={false}
  autoPlay={true}
/>

Propriedades

Propriedade	Tipo	Descrição
src	string	URL ou caminho do arquivo de animação Lottie
autoPlay	boolean	Define se a animação deve iniciar automaticamente (padrão: true)
loop	boolean	Define se a animação deve repetir (padrão: true)
speed	number	Velocidade da animação (padrão: 1)
height	string | number	Altura do container da animação
width	string | number	Largura do container da animação
style	object	Estilos inline para o container da animação
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Heranças

O componente Lottie herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Lottie expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Lottie } from 'eitri-luminus';

function MyComponent() {
  const lottieRef = useRef<Lottie>(null);

  const handlePlay = () => {
    lottieRef.current?.play();
  };

  const handlePause = () => {
    lottieRef.current?.pause();
  };

  const handleStop = () => {
    lottieRef.current?.stop();
  };

  const handleSpeedChange = (speed: number) => {
    lottieRef.current?.setSpeed(speed);
  };

  return (
    <>
      <Lottie
        ref={lottieRef}
        src="/animations/loading.json"
        autoPlay={false}
        loop={true}
      />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={handleStop}>Stop</button>
      <button onClick={() => handleSpeedChange(2)}>2x Speed</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
play()	void	Reproduz a animação
pause()	void	Pausa a animação
stop()	void	Para a animação
setSpeed(speed: number)	void	Define a velocidade da animação
goToFrame(frame: number)	void	Vai para um frame específico
getCurrentFrame()	number	Retorna o frame atual
getTotalFrames()	number	Retorna o número total de frames
isPlaying()	boolean	Retorna se a animação está reproduzindo

Observações

• O componente utiliza a biblioteca @lottiefiles/react-lottie-player
• Suporta arquivos de animação no formato JSON
• É possível controlar a reprodução através das props
• O componente é responsivo por padrão
• Recomenda-se usar para animações vetoriais leves
• Ideal para micro-interações e feedback visual
• Pode ser combinado com outros componentes para criar interfaces mais ricas
• Suporta personalização através de classes CSS e estilos inline
• Métodos via ref disponíveis para controle programático da animação