Lottie Animações

O que é

O JSON é a partitura (descreve camadas, vetores, curvas de Bézier e keyframes) e o Player Lottie é o músico (interpreta as instruções e desenha cada quadro como SVG nativo no DOM). Ideal para ícones animados, micro-feedbacks de interface, ilustrações dinâmicas e loaders — infinitamente escalável e sem a perda de qualidade dos GIFs.

Como funciona

O player lê o arquivo JSON local e desenha os vetores em SVG. O SWCore permite controlar a timeline de forma declarativa ou programática: reprodução contínua, reação ao hover (avançando e retrocedendo), disparo único no clique (feedback), controle milimétrico por scroll ou scrub manual por frames.

Exemplos

<!-- 
  Fluxo de Execução do Lottie:
  1. JSON        -> Partitura vetorial com camadas e curvas
  2. Keyframes   -> Registram a posição e transformação no tempo
  3. Player SVG  -> Converte os dados em elementos <svg> reais
  4. Controle    -> Play, pause, hover, velocidade, segmentos
-->

<!-- Player Lottie real com manipulação de timeline e telemetria -->
<div class="demo-canvas-box" style="padding:1.5rem;">
  <div id="lab-lottie-player" style="width:220px; height:220px; margin:0 auto;"></div>
</div>

<script>
  const player = window.lottie.loadAnimation({
    container: document.getElementById('lab-lottie-player'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '../../assets/lottie/star-character.json'
  });
  
  // Controle milimétrico:
  player.setSpeed(1.5);
  player.playSegments([0, 100], true); // Toca só a entrada
</script>

<!-- 3 aplicações práticas do mesmo JSON -->
<!-- 1. Feedback de Envio no Clique -->
<button id="demo-feedback-btn">Enviar Mensagem</button>

<!-- 2. Loader em Loop Contínuo -->
<div id="demo-loader-stage"></div>

<!-- 3. Barra de Progresso com Scrubber -->
<input type="range" id="demo-progress-scrubber" min="0" max="100">

<!-- 1. Ícone interativo com animação ao passar o mouse -->
<div 
  data-sw="lottie" 
  data-sw-src="../../assets/lottie/star-character.json"
  data-sw-hover
  data-sw-speed="1.5"
  style="width: 140px; height: 140px; margin: 0 auto; cursor: pointer;">
</div>

<!-- 2. Animação contínua em loop -->
<div 
  data-sw="lottie" 
  data-sw-src="../../assets/lottie/star-character.json"
  data-sw-autoplay
  data-sw-loop
  style="width: 140px; height: 140px; margin: 0 auto;">
</div>

// Instanciação manual com controle fino via JavaScript:
const container = document.querySelector('#meu-lottie');

const player = SWMotion.lottie(container, {
  src: 'animacao.json',
  speed: 1.5,
  loop: false,
  autoplay: false
});

// Manipulando a timeline:
player.goToAndPlay(0, true);
player.playSegments([50, 150], true);
player.setDirection(-1);

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

• JSON exportado no padrão Bodymovin/Lottie (do After Effects, Figma ou LottieFiles).
• Respeito automático a prefers-reduced-motion: o player posiciona a arte diretamente no frame final estático sem disparar animações contínuas.

Limitações — o que ele não faz

• O Lottie é vetorial — não é indicado para cenas fotográficas, texturas realistas ou vídeos de alta densidade de imagem (para esses casos, use Vídeo tradicional ou Vídeo no scroll).
• Requer o arquivo de runtime local vendor/lottie-light.min.js carregado na página.