Entendendo Taxa de Atualização de Telas Mobile e Otimização de Frame Rate

Entendendo Taxa de Atualização de Telas Mobile e Otimização de Frame Rate

Imagine que você está assistindo a um filme em casa. Se o filme passa 24 imagens por segundo, seu cérebro as conecta e vê movimento suave. Agora, se passasse 60 imagens por segundo, o movimento seria ainda mais fluido. As telas de celular funcionam exatamente assim! A taxa de atualização (refresh rate) é quantas vezes por segundo a tela redesenha a imagem.

O que é Taxa de Atualização (Refresh Rate)?

A taxa de atualização é medida em Hertz (Hz). Pense nela como o "pulso" da sua tela:

• 60Hz: A tela se atualiza 60 vezes por segundo. É o padrão há muitos anos.
• 90Hz: A tela se atualiza 90 vezes por segundo. Movimento mais suave, melhor experiência.
• 120Hz: A tela se atualiza 120 vezes por segundo. Muito fluido, mas consome mais bateria.

Quanto maior o número, mais suave parece o movimento. Mas há um custo: seu processador precisa trabalhar mais para gerar essas imagens extras.

Como Isso Afeta o Desempenho?

Aqui está o desafio: se sua tela é 120Hz mas seu app só consegue gerar 60 imagens por segundo, o que acontece? A tela mostra a mesma imagem duas vezes enquanto espera a próxima. Isso cria uma sensação de "travamento" chamada frame drop.

É como dirigir um carro: se você acelera e desacelera constantemente, o carro fica instável. O ideal é manter uma velocidade constante.

Frame Rate vs Refresh Rate

Não confunda esses dois conceitos:

• Refresh Rate: Quantas vezes a tela se atualiza (propriedade do hardware).
• Frame Rate: Quantas imagens seu app consegue gerar por segundo (propriedade do seu código).

Para uma experiência perfeita, seu frame rate deve corresponder ao refresh rate do dispositivo.

Otimizando Animações para Diferentes Dispositivos

O desafio é que nem todos os celulares têm a mesma taxa de atualização. Alguns têm 60Hz, outros 90Hz ou 120Hz. Como fazer seu app funcionar bem em todos?

A solução é detectar a taxa de atualização do dispositivo e adaptar suas animações. Aqui está um exemplo conceitual:

// Detectar a taxa de atualização do dispositivo
function getDisplayRefreshRate() {
  // Em navegadores modernos
  if (window.screen.refreshRate) {
    return window.screen.refreshRate;
  }
  // Fallback para 60Hz
  return 60;
}

// Calcular o tempo entre frames
const refreshRate = getDisplayRefreshRate();
const frameTime = 1000 / refreshRate; // em milissegundos

console.log(`Refresh rate: ${refreshRate}Hz`);
console.log(`Tempo por frame: ${frameTime}ms`);

Com essa informação, você pode ajustar a velocidade de suas animações. Se o dispositivo é 120Hz, você pode fazer animações mais rápidas. Se é 60Hz, mais lentas.

Exemplo Prático: Animação Adaptativa

Vamos criar uma animação que se adapta à taxa de atualização:

// Animação que se adapta ao refresh rate
function animateElement(element, duration) {
  const refreshRate = getDisplayRefreshRate();
  const frameTime = 1000 / refreshRate;
  const totalFrames = Math.round((duration * refreshRate) / 1000);
  
  let currentFrame = 0;
  
  function animate() {
    currentFrame++;
    const progress = currentFrame / totalFrames;
    const position = progress * 100; // 0 a 100%
    
    element.style.transform = `translateX(${position}%)`;
    
    if (currentFrame < totalFrames) {
      requestAnimationFrame(animate);
    }
  }
  
  animate();
}

A função requestAnimationFrame é sua melhor amiga! Ela sincroniza automaticamente com a taxa de atualização do dispositivo. Você não precisa calcular tempos manualmente.

Dicas de Otimização

1. Use requestAnimationFrame: Sempre use isso para animações. Ele se sincroniza com a tela automaticamente.
2. Evite animações pesadas: Sombras, desfoque e transparências custam muito processamento. Use com moderação.
3. Teste em dispositivos reais: Um celular de 60Hz e outro de 120Hz se comportam diferente. Teste em ambos.
4. Monitore o frame rate: Use ferramentas de desenvolvedor para ver se você está mantendo 60fps (ou a taxa do dispositivo).
5. Priorize a bateria: Animações em 120Hz consomem mais bateria. Considere usar 60Hz para economizar energia.

Resumo Rápido

Pense na taxa de atualização como o "ritmo" da tela. Seu app precisa acompanhar esse ritmo gerando imagens no tempo certo. Use requestAnimationFrame, detecte a taxa de atualização do dispositivo e adapte suas animações. Assim, seu app será fluido em qualquer celular!