Ralentizar, recorrer y editar las curvas en vivo · Animación Web

Una transición de doscientos cincuenta milisegundos ocurre en menos de lo que tarda el ojo en fijarse en un detalle concreto. Puedes verla cien veces y seguir sin saber por qué se siente mal, porque el problema está en los primeros sesenta milisegundos y esos sesenta milisegundos no los has visto nunca. Ralentizar la reproducción a la décima parte convierte esa animación en dos segundos y medio, y entonces el defecto es obvio.

🎯 Al terminar esta lección sabrás

Reproducir una animación a velocidad reducida y recorrerla manualmente.
Modificar retardo, duración y posición de keyframes arrastrando en el panel.
Editar una curva de Bézier con el editor visual y leer el valor resultante.
Reconocer los límites de la edición en vivo y qué no se puede tocar desde ahí.

Ralentizar y recorrer

El panel de animaciones tiene un selector de velocidad de reproducción. En Chromium las opciones son 100%, 25% y 10%; Firefox ofrece además pasos intermedios. Al elegir una velocidad reducida, todas las animaciones de la página se reproducen a esa velocidad, no solo el grupo seleccionado, lo cual es exactamente lo que quieres para juzgar una coreografía completa.

Al 10%, una transición de 250 ms dura 2,5 segundos. A esa velocidad se ven cosas que a velocidad real son invisibles:

El arranque perezoso. Una curva de tipo ease o ease-in-out dedica sus primeros milisegundos a casi no moverse. En una transición corta eso se percibe como latencia, como si el elemento tardara en reaccionar. Al ralentizar, se ve el tramo plano al principio y queda claro por qué se sentía lento.
El solape mal calculado. Dos elementos que deberían moverse juntos y arrancan con veinte milisegundos de diferencia producen una sensación de descoordinación que nadie sabe nombrar. Ralentizado, la diferencia es evidente.
El sobrepaso feo. Una curva con rebote que se pasa un cinco por ciento en un elemento pequeño se ve bien; la misma curva en un panel de seiscientos píxeles se pasa treinta píxeles y parece un error.
La propiedad que no debía estar. Un elemento que además de desplazarse cambia de color por una transition: all heredada. A velocidad real nadie lo ve; al 10%, salta.

Y el recorrido manual: arrastra la cabeza de reproducción por la línea de tiempo y la página se actualiza a esa posición temporal. Es un control de progreso sobre tu propia animación. Con él puedes parar en el instante exacto en que algo se ve mal e inspeccionar el elemento en ese estado, con sus valores computados reales a mitad de la transición, cosa que de otro modo es prácticamente imposible.

💡

El botón de pausa global

El botón de pausa del panel detiene todas las animaciones del documento. Es la forma más rápida de congelar una interfaz para hacer una captura, medir un espaciado a mitad de una transición o comprobar el estado del árbol de accesibilidad en un momento intermedio. El equivalente en consola es document.getAnimations().forEach((a) => a.pause()).

Editar la barra

Las barras del panel son arrastrables, y cada zona hace algo distinto.

Arrastrar la barra entera desplaza el inicio: cambia el retardo. Es la operación más útil de todas, porque el ajuste que más veces resuelve una coreografía torpe es mover cuarenta milisegundos el arranque de un elemento respecto a otro.

Arrastrar el borde derecho cambia la duración. El borde izquierdo del tramo activo mueve el retardo conservando el final.

Arrastrar un círculo de keyframe cambia el porcentaje de ese paso dentro de un @keyframes. Solo funciona en animaciones CSS con keyframes, no en transiciones ni en animaciones de WAAPI, porque en esos casos no hay pasos intermedios que mover.

Los cambios se aplican inmediatamente y en vivo a la página. Vuelve a disparar la animación y correrá con los valores nuevos. Esto convierte el ajuste de timing en algo directamente manipulable: en lugar de editar, guardar, esperar la recarga, volver a navegar hasta el estado y disparar, arrastras y vuelves a disparar. La diferencia en número de iteraciones por minuto es de un orden de magnitud, y afinar movimiento es una tarea que se resuelve iterando, no razonando.

El editor de curvas

Las curvas no se editan en el panel de animaciones sino en el de estilos, y es la otra mitad del flujo.

En el panel de reglas, cualquier valor cubic-bezier() o palabra clave de easing —ease, ease-in, ease-out, ease-in-out— lleva al lado un icono con una curva. Al pincharlo se abre un editor con la curva dibujada, los dos puntos de control arrastrables y una previsualización animada.

Lo que trae y lo que hay que saber:

Los presets. Un conjunto de curvas con nombre, agrupadas por familia. Sirven de punto de partida.
Los puntos de control. Arrastrarlos actualiza el valor en la regla al instante, y la página lo aplica. El valor numérico aparece escrito y se puede copiar directamente al código.
El eje vertical se puede salir del rango. Un punto de control con y mayor que 1 produce sobrepaso, que es como se escribe un rebote sin usar una librería. cubic-bezier(0.34, 1.56, 0.64, 1) es la forma canónica de un rebote suave y sale de arrastrar el segundo punto por encima del techo.
steps() no se edita aquí. El editor es de Bézier; una función de pasos se cambia a mano.
linear() con muchos puntos tampoco. Las curvas generadas para aproximar un muelle tienen decenas de paradas y el editor no las representa. Ahí el ajuste es sobre los parámetros del muelle, no sobre la curva.

Una advertencia sobre el orden de trabajo que ahorra tiempo: ajusta primero la duración y después la curva. Son parámetros que se compensan entre sí —una curva más agresiva parece más rápida, una duración más corta parece más agresiva— y si los mueves a la vez estás persiguiendo dos variables acopladas y no converges nunca. Fija la duración con una curva neutra, y solo cuando el tiempo esté bien, dale carácter.

Los límites

La edición en vivo termina en cuatro sitios, y conviene conocerlos para no perder tiempo peleándose con la herramienta.

No se persiste. Nada de lo que arrastres se escribe en tu código. Al recargar, todo vuelve. Cómo cerrar ese ciclo es el tema de la lección siguiente.

No se pueden añadir ni quitar keyframes. Puedes mover los que hay; para tener uno más, hay que editar el CSS.

No se pueden editar animaciones que el panel no ve. Todo lo que dirige un bucle de requestAnimationFrame es invisible aquí, y por tanto inmodificable desde el panel.

Las animaciones de WAAPI se editan peor que las CSS. Puedes cambiar retardo y duración, pero no los keyframes, porque viven en un objeto de JavaScript y no en una regla. Para esas, el ajuste en vivo se hace desde la consola con el objeto Animation, que es el tema de la lección sobre getAnimations().

⚡

Afinar movimiento es un problema perceptivo, y los problemas perceptivos no se resuelven razonando

Hay una asimetría entre el trabajo de animación y casi todo el resto del trabajo de ingeniería que explica por qué las herramientas de manipulación directa importan tanto aquí y no importan tanto en otros sitios. Cuando depuras lógica, el criterio de corrección es externo y verificable: o el resultado es el esperado o no lo es, y puedes razonar hasta la respuesta sin ejecutar nada. Cuando afinas una animación, el criterio de corrección eres tú mirándola, y no hay ninguna forma de razonar hasta el valor correcto porque el valor correcto es el que se siente bien, y sentirse bien depende de la distancia recorrida, del tamaño del elemento, del contraste con el fondo, de lo que había en la pantalla un instante antes y de cuántas veces al día se va a ver eso. Ninguna de esas variables está en tu cabeza en forma de número. La consecuencia es que la variable que de verdad determina la calidad final del movimiento es cuántas iteraciones puedes hacer por minuto, y esa variable la fija la herramienta, no tu criterio. Con un ciclo de editar, guardar, recargar, navegar y disparar, cada iteración cuesta veinte o treinta segundos y en la práctica haces cinco, te cansas y te quedas con un valor que no está mal. Con un ciclo de arrastrar y volver a disparar, cada iteración cuesta dos segundos, haces cuarenta sin esfuerzo, y en algún punto de esas cuarenta encuentras el valor que sí está bien y —lo más valioso— entiendes por qué, porque has visto todo el vecindario alrededor de ese valor y sabes qué pasa a un lado y al otro. Esa comprensión es lo que después te permite elegir bien de primeras en el siguiente componente, y es la razón por la que la gente que afina movimiento con manipulación directa acaba necesitando afinar cada vez menos. La herramienta no solo acelera el trabajo: enseña.