Meu truque de animação favorito: suavização exponencial (2023)

Escopo do artigo / técnica

• Muitos leitores gostam da explicação clara e das demos interativas de suavização exponencial e easing.
• Vários observam que essa é uma ideia bem conhecida da época de jogos/Flash (easing, funções de mola, PID/controle proporcional), mas ainda assim é útil vê-la explicada de forma limpa.
• Alguns enfatizam o benefício principal: uma forma sem estado de suavizar o movimento que funciona независимо da taxa de quadros ou de alvos em পরিবর্তন, por exemplo, movimento de câmera, rolagem inercial), e não apenas mais uma curva de easing de 0→1.

Valor da animação de UI

• Os defensores argumentam que animações:
  • Ajudam os usuários a acompanhar mudanças de estado e entender “para onde as coisas foram” (por exemplo, pan do mapa, minimizar janelas).
  • Fornecem feedback de que a entrada foi registrada, especialmente em telas sensíveis ao toque, onde os dedos ocultam os controles.
  • Fazem as interfaces parecerem “polidas” e emocionalmente agradáveis, o que importa para muitos usuários.
• Os críticos argumentam:
  • Animações muitas vezes adicionam latência, parecem lentas e são desnecessárias para controles binários simples.
  • Interfaces instantâneas e “snappy” são melhores para produtividade e uso frequente.
  • Muitas implementações do mundo real são lentas, travadas ou bloqueiam a entrada, então a técnica muitas vezes é aplicada de forma inadequada.

Alternâncias vs caixas de seleção e semântica dos controles

• Debate acalorado sobre se switches animados são uma boa metáfora:
  • Alguns dizem que toggles são mais claros para estado imediato do sistema (luzes ligadas/desligadas, modo A/B), enquanto caixas de seleção pertencem a formulários.
  • Outros acham switches ambíguos: difícil ver qual lado está “ligado”, muitas vezes dependem só de cor e podem ser confundidos com sliders arrastáveis.
  • Vários argumentam que as caixas de seleção/radios clássicos, com rótulos claros, são mais acessíveis, fáceis de descobrir e culturalmente mais robustos.

Acessibilidade, preferências e “reduzir movimento”

• Vários comentaristas desativam animações em todo o sistema e relatam que as UIs ficam mais rápidas e calmas.
• Outros apontam que o sistema operacional e os navegadores suportam prefers-reduced-motion; as UIs da web devem respeitar isso, mas muitas vezes não o fazem.
• A indicação de estado apenas por cor é criticada, especialmente para usuários daltônicos e de telas e-ink; forma, rótulos e contraste são preferidos.

Implementação e desempenho

• Alguns consideram as demos pesadas em JS e baseadas em canvas exageradamente engenheiradas e observam sérios problemas de desempenho/congelamento no Firefox e em navegadores móveis.
• Outros enfatizam que, em produção, normalmente você usaria transições/easing em CSS ou funções de mola cuidadosamente ajustadas, e não muitos loops de requestAnimationFrame.
• Há discussão sobre o comportamento assintótico da suavização exponencial e alternativas (abordagens quadráticas / baseadas em sqrt, termos de atrito, controle PID).