Mi truco de animación favorito: suavizado exponencial (2023)

Alcance del artículo / técnica

• A muchos lectores les gusta la explicación clara y las demos interactivas de suavizado exponencial y easing.
• Varios señalan que es una idea bien conocida desde la época de los juegos/Flash (easing, funciones de resorte, PID/control proporcional), pero aun así vale la pena verla explicada con claridad.
• Algunos enfatizan el beneficio clave: una forma sin estado de suavizar el movimiento que funciona independientemente de la tasa de fotogramas o de objetivos cambiantes (p. ej., movimiento de cámara, desplazamiento inercial), no solo otra curva de easing de 0→1.

Valor de la animación de UI

• Quienes la apoyan argumentan que las animaciones:
  • Ayudan a los usuarios a seguir los cambios de estado y a entender “a dónde fueron las cosas” (p. ej., desplazamiento de mapas, minimización de ventanas).
  • Proporcionan retroalimentación de que la entrada fue registrada, especialmente en pantallas táctiles donde los dedos ocultan los controles.
  • Hacen que las interfaces se sientan “pulidas” y emocionalmente agradables, lo cual importa para muchos usuarios.
• Quienes la critican argumentan:
  • Las animaciones a menudo añaden latencia, se sienten lentas y son innecesarias para controles binarios simples.
  • Las interfaces instantáneas y “ágiles” son mejores para la productividad y el uso frecuente.
  • Muchas implementaciones del mundo real son lentas, entrecortadas o bloquean la entrada, por lo que la técnica suele aplicarse mal.

Interruptores vs casillas de verificación y semántica de los controles

• Debate intenso sobre si los interruptores animados son una buena metáfora:
  • Algunos dicen que los toggles son más claros para estados inmediatos del sistema (luces encendidas/apagadas, modo A/B), mientras que las casillas de verificación pertenecen a formularios.
  • Otros consideran ambiguos los interruptores: es difícil ver qué lado está “encendido”, a menudo dependen solo del color y pueden confundirse con deslizadores arrastrables.
  • Varios argumentan que las casillas de verificación/radios clásicas con etiquetas claras son más accesibles, más fáciles de descubrir y más robustas culturalmente.

Accesibilidad, preferencias y “reducir movimiento”

• Varios comentaristas desactivan las animaciones en todo el sistema y reportan que las UIs se sienten más rápidas y tranquilas.
• Otros señalan que el sistema operativo y los navegadores admiten prefers-reduced-motion; las UIs web deberían respetarlo, pero a menudo no lo hacen.
• Se critica la indicación de estado solo por color, especialmente para personas daltónicas y usuarios de pantallas e‑ink; se prefieren la forma, las etiquetas y el contraste.

Implementación y rendimiento

• Algunos ven las demos pesadas en JS y basadas en canvas como sobredimensionadas y señalan serios problemas de rendimiento/congelación en Firefox y navegadores móviles.
• Otros subrayan que en producción normalmente usarías transiciones CSS o funciones de easing, o funciones de resorte ajustadas con cuidado, no muchos bucles requestAnimationFrame.
• Hay discusión sobre el comportamiento asintótico del suavizado exponencial y alternativas (enfoques cuadráticos / basados en sqrt, términos de fricción, control PID).