Canvas Animações

O que é

Diferente do HTML normal (onde cada elemento é um nó pesado com estilo e posição rastreados pelo navegador), o <canvas> é como uma folha vazia que o JavaScript limpa e redesenha a cada quadro. É a ferramenta perfeita para cenas densas (centenas de partículas, campos orbitais, ondas matemáticas, gráficos) que seriam pesadas demais se fossem divs normais.

Como funciona

Todo desenho no Canvas segue o mesmo ciclo a cada frame: 1. Estado (guardar progresso, coordenadas e variáveis) → 2. Limpar (clearRect apaga o quadro anterior) → 3. Calcular (converter o tempo ou o scroll em coordenadas) → 4. Desenhar (pintar os novos pixels). O motor do SWCore cuida automaticamente do redimensionamento responsivo, ajuste de DPI Retina (limitado a 2× para equilibrar nitidez e memória) e do ciclo de vida da animação.

Exemplos

<!-- 
  No Canvas não existem objetos separados após o desenho: apenas pixels.
  Para mudar algo de lugar, o JavaScript repete os 4 passos a cada quadro:
  1. Estado  ->  2. Limpar (clearRect)  ->  3. Calcular  ->  4. Desenhar
-->
<canvas id="meu-canvas" width="600" height="220"></canvas>

<!-- NÍVEL 1: Anima ao entrar na tela 1 única vez e estabiliza -->
<div class="demo-canvas-box">
  <canvas data-sw="canvas" data-sw-canvas="once" data-sw-canvas-preset="graph" class="demo-canvas-display"></canvas>
  <div class="demo-canvas-overlay-info">
    <span class="demo-canvas-pill">NÍVEL 1 · ONCE</span>
    <span style="font-size:.8rem; color:#94a3b8;">Desenha a introdução uma vez ao entrar no campo de visão</span>
  </div>
</div>

<!-- NÍVEL 2: Anima continuamente enquanto visível; pausa ao sair da tela -->
<div class="demo-canvas-box">
  <canvas data-sw="canvas" data-sw-canvas="view" data-sw-canvas-preset="particles" data-sw-canvas-count="50" class="demo-canvas-display"></canvas>
  <div class="demo-canvas-overlay-info">
    <span class="demo-canvas-pill">NÍVEL 2 · VIEWPORT PLAY / PAUSE</span>
    <span style="font-size:.8rem; color:#94a3b8;">50 partículas conectadas — economiza CPU/bateria quando fora da tela</span>
  </div>
</div>

<!-- NÍVEL 3: O desenho avança ou volta no tempo amarrado ao scroll da página -->
<div class="demo-canvas-box" style="padding:1.5rem;">
  <canvas data-sw="canvas" data-sw-canvas="scroll" data-sw-canvas-preset="rings" class="demo-canvas-display" style="height:260px;"></canvas>
  <div class="demo-canvas-overlay-info" style="position:static; margin-top:1rem; padding:0;">
    <span class="demo-canvas-pill">NÍVEL 3 · SCROLL-DRIVEN (SCRUB)</span>
    <span style="font-size:.82rem; color:#94a3b8;">Gire o scroll da página — os anéis orbitais giram e expandem com o movimento</span>
  </div>
</div>

<!-- Inicialização e renderização 2D customizada via SWMotion.createSurface -->
<canvas id="custom-canvas" class="demo-canvas-display"></canvas>

<script>
  const surface = SWMotion.createSurface(document.getElementById('custom-canvas'));
  
  function render(time) {
    const { context, width, height } = surface;
    context.clearRect(0, 0, width, height);
    
    // Desenha seu efeito 2D com suporte total a Retina e Resize
    context.fillStyle = '#38bdf8';
    context.beginPath();
    context.arc(width / 2, height / 2, 40 + Math.sin(time * 0.003) * 10, 0, Math.PI * 2);
    context.fill();
    
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
</script>

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Requisitos

• Precisa do gsap-bundle.js para o Nível 3 (Scroll-driven). Os Níveis 1 e 2 funcionam com IntersectionObserver nativo e o bundle do SWCore.
• Em navegadores com prefers-reduced-motion ativo, animações automáticas em loop são pausadas.

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

• O que é pintado no Canvas não existe como elementos DOM separados — não é inspecionável com botão direito, não recebe foco de teclado e não é lido por leitores de tela. Textos essenciais e botões devem ficar em HTML acessível em volta da cena.
• Ajuste de DPR (Device Pixel Ratio) é limitado a 2× para manter taxa estável de 60fps sem sobrecarregar a GPU em telas 3×/4× ou dispositivos móveis.