Cómo diseñar animaciones

La animación es un gráfico

• Para diseñarla, tiene que poder reproducirse y combinarse.
• Toda animación es, en esencia, un valor que cambia según alguna entrada (tiempo, scroll, posición del mouse, etc.), y ese cambio puede representarse en un gráfico.
• La forma del gráfico determina la sensación del movimiento, y la matemática es la herramienta para crear esa curva exactamente como se quiere.

Herramientas matemáticas

• Curva Bézier (easing): una expresión de aceleración y desaceleración con un inicio y un final definidos. Funciona porque dos puntos de control atraen la curva como si fueran imanes. Se construye aplicando interpolación lineal de forma recursiva. Incluso con el mismo movimiento, la impresión que transmite cambia por completo según sea ease-in o ease-out
• Aproximación exponencial: value += (target - value) * factor permite seguir un objetivo de manera suave con una sola línea. Se siente natural incluso si el objetivo cambia en cada frame. Se usa para seguir el cursor, contadores, barras de progreso, etc.
• Resorte: oscilación amortiguada basada en dos fuerzas: restauración y amortiguamiento. La sensación se define con dos valores, stiffness y damping. A diferencia del easing, no tiene duration, y si el objetivo cambia, la transición ocurre de forma natural manteniendo la velocidad actual
• Simulación física: combina leyes físicas como gravedad, colisión y fricción. La clave es que "si solo defines las reglas, el movimiento se genera por sí solo". En lugar de diseñar manualmente la trayectoria individual de decenas de objetos como confeti, basta con configurar gravedad y resistencia del aire. Eso sí, como es menos predecible, encaja mejor en efectos secundarios que en transiciones centrales de la UI
• atan2: función para obtener la dirección entre dos puntos. Se usa para que un elemento mire hacia la dirección en la que se mueve, o para efectos de inclinación 3D donde una tarjeta se ladea según la dirección del cursor
• Funciones trigonométricas: ideales para repeticiones periódicas. Si se aplica una diferencia de fase entre varios elementos, se crea un efecto de onda. Útil en indicadores de escritura, fondos flotantes, etc.
• Onda de sierra: a diferencia del vaivén suave de sin, avanza de 0→1 y luego se reinicia de inmediato, creando una repetición unidireccional. Se usa en pulse rings, pings y progresos repetitivos

Diseñar animaciones complejas

• Funciones por tramos: divide una curva compleja en secciones y diseña cada parte por separado antes de unirlas. Permite un ajuste intencional más fino que una simulación física (por ejemplo, reducir deliberadamente la altura de un rebote)
• Identificar dependencias: el punto de partida al diseñar una animación es "¿de qué depende este valor?". Se puede clasificar en tres tipos: basada en tiempo (la más común), basada en valores (scroll, posición del mouse) y basada en eventos (disparada por clic o hover)
• Pipelining: colocar las piezas en secuencia sobre una línea de tiempo. Se pueden combinar estrategias como secuencia, superposición, simultaneidad o stagger. Cada pieza puede modificarse de forma independiente
• Transición de estados: en lugar de avanzar por tiempo, pasa a la siguiente etapa según una condición. Si se explicitan condiciones de transición como lanzamiento → explosión → dispersión → desaparición en unos fuegos artificiales, puede gestionarse con una máquina de estados
• Separación de propiedades: dividir varias propiedades (tamaño, color, transparencia, etc.) en tracks independientes. Como cada track no necesita conocer a los otros, resulta más fácil ajustar detalles o agregar nuevos

Consideraciones

• Aleatoriedad: hay que usar aleatoriedad controlada, no completamente al azar. La clave está en definir el límite entre "qué se controla" y "qué se deja al azar"
• Bidireccionalidad: si la dirección cambia mientras algo está apareciendo, debe diseñarse para que se invierta continuando desde el estado actual, evitando saltos o movimientos extraños

Límites y fortalezas de la animación en código

• Las animaciones complejas como movimientos de personajes o morphing detallado se adaptan mejor a herramientas especializadas como Lottie o Rive, o al video.
• En cambio, la gran fortaleza de la animación en código está en las interacciones en tiempo real que reaccionan de inmediato a la entrada del usuario.