Editar curvas y tiempos en vivo

Ajustar una animación editando el código y recargando es un ciclo de veinte o treinta segundos, y una animación necesita entre diez y treinta iteraciones para quedar bien. Eso son diez minutos de espera pura por animación, y explica por qué en tantos proyectos las curvas son las que salieron por defecto. El panel permite arrastrar los tiempos directamente sobre la línea y editar la curva en un control visual, con el resultado aplicándose al instante. El ciclo pasa de treinta segundos a cero.

Arrastrar los tiempos

Sobre la línea de tiempo del grupo, las barras son manipulables directamente.

Arrastrar el borde derecho cambia la duración. Arrastrar la barra entera cambia el retraso. Arrastrar el borde izquierdo ajusta el inicio.

Los cambios se aplican inmediatamente, y volver a reproducir el grupo muestra el resultado. Con eso, el ajuste de la coreografía —que es donde están la mayoría de los problemas, como se vio en la lección de la línea de tiempo— pasa a ser directo: escalonar cinco elementos arrastrando cinco barras es cuestión de segundos.

Lo que se cambia aquí no se persiste: al recargar vuelve el valor del código. Es una herramienta de exploración, no de edición. La forma de conservar el resultado es anotar el valor y llevarlo al código.

El editor de curvas

Al pulsar sobre el indicador de curva de una animación con aceleración editable, aparece un control visual con la curva dibujada y dos puntos de control arrastrables.

Lo que representa el dibujo es importante y casi nadie lo tiene claro: el eje horizontal es el tiempo y el vertical es el progreso. Una curva que sube deprisa al principio significa que el elemento recorre mucha distancia en poco tiempo al empezar, es decir, arranca rápido. Una que es plana al principio y sube al final significa que arranca lento.

Los dos puntos de control definen una curva de Bézier cúbica con cuatro números, que son las coordenadas de esos dos puntos. El primero y el último están fijos en el origen y en el extremo.

De ahí salen tres lecturas prácticas.

Una curva por encima de la diagonal es rápida al principio y lenta al final: desaceleración. Es la correcta para entradas y para cosas que llegan.

Una curva por debajo de la diagonal es lenta al principio y rápida al final: aceleración. Es la correcta para salidas y para cosas que se van.

Una curva en forma de ese acelera y desacelera: es la correcta para movimientos entre dos posiciones visibles.

El editor incluye además presets con las curvas más habituales, que son un buen punto de partida antes de ajustar a mano.

Hay un caso que el editor de Bézier no cubre: las curvas por pasos, que avanzan a saltos discretos en lugar de continuamente. Se usan para animaciones de sprites y para efectos de escritura, y el panel las muestra pero no las edita con el control de curva.

Qué curva para qué movimiento

La fila que más se incumple es la cuarta. Una respuesta a un toque con una curva de entrada lenta se siente como si la interfaz dudara, y es uno de los defectos que más se notan y menos se diagnostican. Para la respuesta inmediata a una acción del usuario, la regla es duración corta y arranque inmediato.

Trasladar el resultado al código

El editor da los cuatro números de la curva, y esos números van directamente al código.

// Un catalogo de curvas con nombre, para dejar de escribir numeros sueltos
const CURVAS = {
  // Entradas: llegan y se asientan
  entradaSuave:    'cubic-bezier(0.16, 1, 0.3, 1)',
  entradaFirme:    'cubic-bezier(0.05, 0.7, 0.1, 1)',
  // Salidas: se van sin ceremonia
  salida:          'cubic-bezier(0.3, 0, 0.8, 0.15)',
  salidaRapida:    'cubic-bezier(0.4, 0, 1, 1)',
  // Movimiento entre posiciones visibles
  transicion:      'cubic-bezier(0.4, 0, 0.2, 1)',
  // Respuesta directa: casi lineal
  respuesta:       'cubic-bezier(0.2, 0, 0.4, 1)',
  // Rebote leve: el valor pasa de 1 y vuelve
  rebote:          'cubic-bezier(0.34, 1.56, 0.64, 1)'
};

const DURACIONES = {
  respuesta: 120,
  elemento: 240,
  transicion: 320,
  pantalla: 420
};

// Comparador ejecutable: dibuja una fila por curva para verlas juntas
(() => {
  const host = document.createElement('div');
  host.style.cssText = 'font:13px system-ui;padding:8px';
  document.body.append(host);

  const cajas = Object.entries(CURVAS).map(([nombre, curva]) => {
    const fila = document.createElement('div');
    fila.style.cssText = 'display:flex;align-items:center;gap:10px;margin:6px 0';
    const etiqueta = document.createElement('span');
    etiqueta.textContent = nombre.padEnd(14);
    etiqueta.style.cssText = 'width:120px;font-family:monospace';
    const caja = document.createElement('div');
    caja.style.cssText = 'width:22px;height:22px;background:#a6e3a1;border-radius:6px';
    fila.append(etiqueta, caja);
    host.append(fila);
    return { caja, curva };
  });

  const reproducir = () => {
    for (const { caja, curva } of cajas) {
      caja.animate(
        [{ transform: 'translateX(0)' }, { transform: 'translateX(280px)' }],
        { duration: 900, easing: curva, fill: 'both' }
      );
    }
  };

  const boton = document.createElement('button');
  boton.textContent = 'Reproducir todas';
  boton.onclick = reproducir;
  host.prepend(boton);
  reproducir();
  console.log('Abre el panel de animaciones y ralentiza para comparar las curvas.');
})();

Ese comparador es la herramienta que de verdad enseña la diferencia entre curvas: verlas por separado no sirve de nada, y verlas simultáneamente recorriendo la misma distancia en el mismo tiempo hace evidente cuál corresponde a cada situación.

El catálogo con nombres es la parte que conviene llevarse al proyecto. Escribir los cuatro números en cada sitio garantiza que en seis meses habrá quince curvas ligeramente distintas y ninguna razón documentada. Un conjunto pequeño de curvas con nombre semántico, expuestas como variables CSS o como constantes, es lo que hace que el movimiento de una aplicación se sienta coherente.