Curvas Bézier: Cómo Hacer que el Movimiento Sea Natural
Entiende las curvas de aceleración y cómo usarlas para crear animaciones que se sienten naturales y no mecánicas.
Leer másTransiciones Entre Pantallas: Guía Práctica
Cómo conectar pantallas con animaciones que guían al usuario sin distraer. Ejemplos reales en apps populares.
Por qué las transiciones importan más de lo que crees
Las transiciones entre pantallas son más que adornos visuales. Guían la atención del usuario, comunican cambios de contexto y hacen que una app se sienta coherente. Sin ellas, las apps saltan de un lado a otro. Con ellas, respiran.
Hemos visto apps con interfaces perfectas que se sienten robóticas. Y apps simples que se sienten naturales. La diferencia está en cómo se mueven las cosas. Aquí te enseñamos a dominar ese movimiento.
Lo que aprenderás
- Tipos de transiciones y cuándo usar cada una
- Duraciones que funcionan (no son todas iguales)
- Ejemplos de apps reales y por qué funcionan
- Errores comunes que ralentizan la experiencia
01
Transiciones Modales: La Entrada Controlada
Una transición modal es cuando una pantalla nueva aparece sobre la anterior. No reemplaza el contenido — se superpone. Instagram lo usa cuando abres un perfil. WhatsApp cuando amplías una foto.
La duración importa. Muy rápido (200ms) y el usuario se pierde qué cambió. Muy lento (600ms+) y siente que la app es lenta. El rango seguro es 300-400ms para transiciones modales. Ese es el tiempo que tarda nuestro ojo en registrar el cambio sin esperar.
También importa el punto de origen. Si abres un modal desde un botón, anímalo como si saliera de ese botón. Usa transform: scale() desde 0.8 hasta 1, combinado con opacity. Así el usuario entiende que vino de ahí.
02
Transiciones Push: El Desliz Natural
Una transición push es cuando una pantalla nueva empuja la anterior hacia un lado. Android usa esto en la navegación estándar. Es directa — una pantalla reemplaza a la otra. El movimiento comunica: “avanzaste en la jerarquía”.
Para transiciones push, usa transform: translateX(). Si vas hacia adelante, la nueva pantalla entra desde la derecha (translateX: 100% 0). La anterior sale hacia la izquierda. La duración ideal es 250-350ms. Más rápido y se ve brusco. Más lento y bloquea la interacción.
Lo importante aquí es la coherencia. Si todas tus pantallas usan push en la misma dirección, el usuario desarrolla una intuición mental del flujo. Sabe que puede volver atrás deslizando. Es como un libro — página por página.
Artículos Relacionados
Nota Importante
Este artículo es una guía educativa sobre principios de diseño de transiciones y animaciones en interfaces. Los ejemplos y técnicas descritas se basan en prácticas comunes de la industria y pueden variar según la plataforma, sistema operativo y requisitos específicos de cada proyecto. Te recomendamos probar estas transiciones en tus propias aplicaciones y ajustarlas según el feedback de usuarios y las métricas de rendimiento. Cada contexto es único — lo que funciona en una app puede necesitar adaptación en otra.
El Movimiento Comunica
Las transiciones entre pantallas no son detalles. Son parte del lenguaje de tu app. Comunican cambios, guían la atención, y hacen que el usuario se sienta en control. Una transición bien ejecutada se nota por su ausencia — el usuario no piensa “qué transición hermosa”, simplemente siente que todo fluye.
Empieza con lo básico: modales de 300-400ms, push de 250-350ms. Usa easing curves que se sienten naturales (ease-out para entradas, ease-in para salidas). Prueba con usuarios reales y ajusta según su retroalimentación. El movimiento es una habilidad — se mejora practicando.
Quieres explorar más sobre animación y diseño de movimiento?
Ver todos los artículos de animación