principios-de-animacion

Principios de Movimiento

Decide cómo debe moverse algo para que se sienta correcto, independientemente de la herramienta utilizada para construirlo. Esta habilidad responde a preguntas sobre timing, easing, espaciado, peso y ritmo. No elige un stack tecnológico; produce números concretos (duraciones, curvas cubic-bezier, offsets de escalonamiento, configuraciones de resorte) listos para entregar a cualquier implementación.

Cuándo usarla

• El movimiento se siente rígido, flotante, mecánico, robótico o barato y necesita diagnóstico.
• Elegir la duración, la curva de easing y el offset de escalonamiento de un clip o transición.
• Revisar si el movimiento respeta la intuición física (peso, seguimiento, arcos).
• Sincronizar keyframes con un ritmo musical o acento de edición.

Tres pilares: resuelve estos antes de cualquier número

Cada pieza de movimiento debe responder tres preguntas antes de elegir una duración o curva. Si las saltas, obtienes un movimiento técnicamente correcto que no se siente a nada. Este es el vocabulario compartido al que se refiere el resto de la colección.

Pilar	La pregunta	Qué determina
Intención emocional	¿Qué debería sentir el espectador? (alegría, calma, urgencia, confianza, elegancia)	Easing, duración, amplitud/sobreimpulso
Narrativa visual	¿Cuál es la micro-historia? Preparación → acción → resolución	Secuenciación, puesta en escena, qué entra y cuándo
Artesanía del movimiento	¿Cómo lo hacemos creíble?	Física, movimiento secundario, arcos, seguimiento

Tres capas de movimiento: profundidad, no planitud

Movimiento plano = solo se mueve lo principal. El movimiento creíble ejecuta tres capas a la vez:

• Primaria: la acción principal que sigue el ojo (el movimiento héroe).
• Secundaria: riqueza de apoyo que reacciona a la primaria (una sombra que se desplaza, un ícono que se mueve, una etiqueta que se asienta tarde).
• Ambiente: vida de fondo que nunca exige atención (desplazamiento lento de degradado, un pulso de bajo contraste).

La capa de juicio (motion-art-direction) las llama Héroe / Apoyo / Textura: las mismas tres capas, clasificadas por lo que merece movimiento. Primaria≈Héroe, Secundaria≈Apoyo, Ambiente≈Textura.

Principios fundamentales

El easing es la palanca más importante

El movimiento lineal se percibe como robótico. Reserva linear solo para bucles continuos (spinners, marquesinas, scroll infinito). Todo lo que el ojo percibe como un evento discreto necesita aceleración.

Haz coincidir la curva con la acción:

• Entrada / aparición -> ease-out (inicio rápido, aterrizaje suave). El objeto llega con energía y desacelera hasta su lugar. cubic-bezier(0.16, 1, 0.3, 1).
• Salida / desaparición -> ease-in (inicio suave, final rápido). El objeto se acelera para salir. cubic-bezier(0.7, 0, 0.84, 0).
• Movimiento / reubicación (permanece en pantalla) -> ease-in-out (simétrico). cubic-bezier(0.65, 0, 0.35, 1).
• Juguetón / con marca -> ligero sobreimpulso. cubic-bezier(0.34, 1.56, 0.64, 1) (el 1.56 empuja más allá de 1.0, creando un sobreimpulso y asentamiento que se percibe como "peso").

Regla general: el ojo perdona un inicio lento mucho menos que un final lento. En caso de duda, desacelera hasta el reposo.

Modelado manual del easing (After Effects). Cuando se anima con keyframes manuales en lugar de proporcionar una curva, los mismos principios se aplican al Editor de Curvas: modela el Gráfico de Velocidad para que los extremos se aplanen hacia cero, y empuja la influencia de desaceleración al 80–90% para un inicio rápido y un aterrizaje suave. F9 (Easy Ease) es solo un punto de partida simétrico del 33%: hazlo asimétrico. Consulta references/easing-graph-editor.md para leer el Editor de Curvas, técnicas de manejo/influencia, y recetas paso a paso de sobreimpulso, anticipación y rebote (incluyendo una expresión de rebote con amortiguación).

El timing comunica peso e importancia

Elemento	Duración
Micro-interacción (hover, toggle, feedback táctil)	100-200ms
Transición de UI (panel, modal, región de página)	200-400ms
Héroe / elemento grande / pantalla completa	400-800ms
Movimiento de cámara cinemático	800-2000ms

La distancia y el tamaño escalan la duración. Un ícono pequeño que se mueve 20px y un panel a toda página que se mueve 800px NO deben compartir la misma duración: el panel necesita más tiempo o parecerá sin peso. Una escala práctica: mantén la velocidad percibida aproximadamente constante agregando ~30-50% de duración cuando la distancia o el área aproximadamente se duplican. Los objetos pesados comienzan lentamente y sobrepasan menos; los objetos ligeros chasquean y pueden rebotar.

El espaciado y el escalonamiento crean ritmo

Nunca reveles una lista, cuadrícula o grupo de una sola vez: se lee como un evento plano único. Escalona el inicio de cada hijo.

• Listas / elementos secuenciales: 40-80ms entre elementos.
• Cuadrículas densas: 20-40ms (más elementos, menos retardo por elemento, o la cola se alarga).
• Limita la revelación total aproximadamente a 600-800ms para un grupo; si count * offset supera eso, reduce el offset o cambia a un escalonamiento basado en distancia (los elementos más alejados de un punto de origen comienzan más tarde).
• La dirección del escalonamiento debe seguir al ojo: de arriba a abajo, o irradiando desde un punto focal.

La regla del 1/3 (dos formas, ambas universales):

• Distancia: ningún elemento viaja más de ~1/3 de la pantalla sin un keyframe intermedio o un cambio de escala/opacidad. Los deslizamientos largos e ininterrumpidos se leen como "la plantilla se movió", no como "algo sucedió".
• Simultaneidad: con 3 o más elementos, mantén no más de ~1/3 en movimiento activo a la vez. El resto se mantiene quieto o se mueve como ambiente. Todo moviéndose junto = ruido sin punto focal.

La anticipación y el seguimiento venden el movimiento físico

• Anticipación: un pequeño contra-movimiento antes de la acción principal (un botón baja scale 0.95 antes de reventar, un personaje se agacha antes de saltar). 60-120ms es suficiente.
• Seguimiento / acción superpuesta: las partes que arrastran continúan moviéndose después de que el cuerpo principal se detiene (una tarjeta héroe aterriza, luego su sombra y etiqueta se asientan 40-80ms después). Escalona el asentamiento de los elementos adjuntos en lugar de detener todo en el mismo fotograma.
• Arcos: las curvas de movimiento natural; la traducción pura en línea recta de un objeto orgánico parece mecánica. Agrega un ligero arco a x/y o anima una trayectoria.

Sincronización con el ritmo (beat-sync)

Cuando el movimiento acompaña al audio, coloca los keyframes de impacto (un golpe, un corte, una revelación) en el pulso, no entre pulsos. A 120 BPM, un pulso es 500ms; una cuadrícula de corchea es 250ms. Cuantiza los momentos clave a esa cuadrícula. Para ediciones sin música, establece un pulso visual (por ejemplo, un evento importante cada ~500-800ms) para que la pieza respire de manera consistente.

Movimiento basado en resorte vs. basado en duración

Los resortes (masa / rigidez / amortiguación) autodeterminan la duración y se sienten más físicos para movimiento interactivo e interrumpible (arrastrar-soltar, gestos). Duración+easing es mejor para secuencias coreografiadas y bloqueadas a la línea de tiempo (video, revelaciones vinculadas al desplazamiento) donde la sincronización exacta importa. Un resorte predeterminado rápido: stiffness 300, damping 30, mass 1. Consulta references/easing-curves.md para una tabla completa de resortes.

Diagnóstico de fallos comunes

• Se siente rígido/robótico -> usando linear o easing simétrico en una entrada; cambia a ease-out.
• Se siente flotante/pesado -> duración demasiado larga o ease-out demasiado suave; recorta la duración un 30%, afila la curva.
• Se siente barato/desordenado -> todo aparece a la vez (sin escalonamiento), o todos los elementos comparten una duración independientemente del tamaño.
• Se siente mecánico a pesar del easing -> sin anticipación, sin seguimiento, trayectorias en línea recta; agrega arcos y superposición.

Referencia rápida

Necesidad	Usa
Entrada	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Salida	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Movimiento	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Pop de marca	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Escalonamiento de lista	40-80ms por elemento, tope ~700ms total
Solo bucle	linear

Archivos de referencia

• references/easing-curves.md: biblioteca de cubic-bezier nombrada con valores exactos, configuraciones de resorte (Framer/react-spring/iOS) y guía de duración por tipo de elemento.
• references/easing-graph-editor.md: artesanía del Editor de Curvas de After Effects: gráfico de velocidad vs. gráfico de valor, manejadores de easing y números de influencia/velocidad, y recetas paso a paso para animaciones rápidas, con sobreimpulso, anticipación y rebote.
• references/twelve-principles.md: los 12 principios de Disney, cada uno con un ejemplo concreto y numérico de gráficos en movimiento.