Diseño de movimiento y animaciones de interfaz

1) Por qué la animación en el producto

• explica las relaciones causales (donde desapareció, de donde surgió el elemento),
• dirige la atención hacia la acción principal,
• confirma el resultado (feedback) y reduce la carga cognitiva,
• hace que las transiciones sean predecibles y «tangibles».

Regla # 1: significado> estilo. Cualquier animación responde a la pregunta "¿qué pasó y cómo se relaciona conmigo? ».

2) Principios básicos

1. Jerarquía de movimiento: los contenedores son los primeros en moverse, luego el contenido y luego las piezas.
2. Constancia: los mismos patrones para las mismas acciones.
3. Ahorro: mínimo de propiedades, mínimo de fotogramas; es mejor más corto y más claro.
4. Física realista: aceleración al principio, desaceleración al final; No hay «tirones».
5. Reversibilidad: «atrás» se siente espejo «adelante».
6. Disponibilidad: respete la configuración del sistema para reducir la animación.

3) Duración y curvas (recomendaciones)

3. 1 Duración (escritorio/móvil)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: entrada 180-240 ms, salida 120-160 ms

Modales/drowers: 200-320 ms

Transiciones de pantalla: 240-360 ms

Deslizamiento/paralaje: ≤ 200 ms por segmento, evitar ciclos interminables

3. 2 Curvas

Principal: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- tempo natural «material»

La entrada es más rápida, la salida es más suave: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elasticidad (rara vez, acento): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'con restricción overshoot ≤ 8px/8 °

Regla: no use interpolación lineal para moverse y opacity al mismo tiempo - sensación de «mecánica».

4) Coreografía de transiciones

Apariencia: escala ligera 0. 98→1. 0 + fade-in, desplazamiento 8-16 px en el eje de ocurrencia.
Desaparición: orden inverso, más rápido de entrada (−20 -30%).
Deslizar/cambiar pestañas: la «base» común (contenedor) se desplaza a 16-24 px; la pestaña activa se realza antes de que comience el movimiento.
Listas: afloje la cascada (stagger 20-40 ms/elemento, no más de 6-8 elementos).

5) Micro-interacciones (patterns)

Botón (hover/press): sombra + diapositiva ligera/escala 0. 98; pressed rebota ≤ 80 ms.
Enfoque: anillo de contraste sin blur; anime el grosor/la transparencia, no glow.
Inputs: carruaje/retroiluminación del campo en focus; errores - agitación ≤ 6 px, ≤ 140 ms, 1 ciclo.
Toggle/Checkbox: snap a la posición final, click retardo no más de 60-80 ms.
Esqueleto/carga: shimmer 1200-1600 ms, amplitud de brillo ≤ 20%, sin flashes bruscos.

6) Estados de contenido

Loading → Success/Empty/Error: un «canal» de movimiento; no mezcle diferentes direcciones.
Toast/Alerts: vuelan desde el lado de origen del evento (por ejemplo, de abajo a derecha para las acciones del usuario).
Pull to refresh: estiramiento con estiramiento elástico; tiempo de devolución ≤ 250 ms.

7) Accesibilidad (A11y) y seguridad

Admita 'prefers-reduced-motion: reducir': reemplace los movimientos por fade/scale ≤ 1% o transición estática.
Evitar brotes> 3 por segundo y grandes parpadeos de contraste (epilepsia fotosensible).
No utilice paralaje/zoom fuerte en usuarios con historial de mareo; Haga una opción de desconexión.
Los estilos de enfoque siempre son visibles sin animación (no solo color/movimiento).

8) Rendimiento (60 FPS como objetivo)

Anime sólo opacity y transforme (translate/scale/rotate); evite 'top/left/width/height'.
Incluye el compuesto: 'transformación: translateZ (0)' o 'will-change: transformación, opacity' (moderadamente).
Minimice el repaint: no anime sombras con más blur y filtros en muchos elementos.
Descomponer grandes transiciones en batches; utilice requestAnimationFrame.
Para listas, virtualización/redefinición fuera de pantalla.

9) Tokens motion en el sistema de diseño

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Aplicación (CSS/JS/Nat)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: utilice para ilustrar estados vacíos y onboarding; no para controles críticos. Optimice y almacene en caché.

11) Patrones de descarga

Skeleton en lugar de spinner donde se conoce la estructura de contenido.
Progreso: barra determinista si se conoce el progreso; indeterminado - con un ritmo uniforme, sin «tirones».
Evite el skeleton «flotante» al reconstruir - asegure las dimensiones.

12) Transiciones entre páginas/pantallas

Guardar el punto de atención (shared element transitions): la tarjeta se «abre» en el artículo.
La navegación «hacia adentro» va hacia adelante/hacia la derecha/hacia arriba, «hacia atrás» hacia atrás; la dirección es única para la plataforma.
El sustrato de fondo se oscurece hasta un 40-60% con sobreesfuerzos.

13) Especificidad de iGaming

Spin/Reveal: una aceleración corta (≤ 200 ms) + rotación uniforme + atenuación suave; prohibición de ciclos interminables sin efecto.
Win/Jackpot: ráfaga de luz ≤ 500 ms, sin estroboscopio; toma de sonido a bajo volumen; el texto de la victoria es chitabelen (AAA por contraste).
Torneos/clasificaciones: aumento de la cuenta - contador con números de tabla y un paso fácil de 40-60 ms/unidad (batches), sin «saltos» layout.
Juego responsable: notificaciones y límites sin distracciones; animación mínima, énfasis en la legibilidad.

14) Anti-patrones

Retrasos> 120 ms antes de responder al clic.
«Ascensor» de opacity + escala 0. 9→1. 05→1. 0 con overshoot para cada pequeña cosa.
Paralaje de fondo, en conflicto con el skroll.
Parpadeos/pulsaciones infinitas.
Animar las propiedades layout/paint ('height', 'left',' filter: blur () ') en un conjunto de elementos.
Curvas y duraciones no constantes en las mismas acciones.

15) Proceso y QA

• Prototipos con temporizaciones/curvas; coreografía a nivel de marcos.
• Directorio de tokens de movimiento y ejemplos para componentes.

• Pruebas unitarias de visibilidad/estado (las transiciones se completan como se espera).
• Pruebas visuales (snapshots del final de las animaciones).
• Perfilando (Performance/Timeline) en escenas de máxima carga.

• Apoyado por 'prefers-reduced-motion'.
• Sólo transformación/opacity.
• La duración y las curvas corresponden a tokens.
• Sin destellos> 3/sec y estroboscópico fuerte.
• Skeleton en lugar de spinner, donde es posible.
• Las transiciones son reversibles y predecibles.

16) Documentación en el sistema de diseño

«Motion-tokens»: duration/easing/stagger con ejemplos.
«Patrones de transición»: modales, listas, pestañas, páginas.
«A11y & Performance»: hyde sobre reducción de movimiento y composición.
"Do/Don 't': clips cortos con ejemplos exitosos/fallidos.

Resumen breve

El diseño Motion es un lenguaje de causas y consecuencias. Mantenga los tiempos cortos, las curvas consistentes y las propiedades baratas para el renderizado. Respete la disponibilidad, documente los tokens y verifique el rendimiento. Entonces, la animación amplificará el UX y no interferirá con la velocidad y claridad de la interfaz.