Cómo animar una tarjeta con deslizamiento para descartar
Guía para diseñar el gesto de deslizar para descartar: detección de ángulo táctil, desvanecimiento, colapso de la lista y opciones de deshacer.
Idea clave
El gesto de deslizar para descartar sigue el movimiento del dedo horizontalmente mediante transform: translateX, reduciendo la opacidad a medida que se acerca al borde. Si se supera el umbral de descarte o la velocidad de lanzamiento es alta, la tarjeta se expulsa de la pantalla y la lista colapsa suavemente el hueco con una animación de altura o transform: translateY.
Seguimiento y detección de ángulo
Para evitar activar un descarte involuntario al hacer scroll vertical, evalúa el ángulo del gesto en los primeros 10 px de movimiento. Si el desplazamiento es predominantemente horizontal, bloquea el scroll vertical y toma control del elemento.
Pistas visuales durante el deslizamiento
A medida que la tarjeta se desplaza, revela acciones de fondo (como archivar o eliminar) con colores o iconos que crecen al rebasar el umbral de activación.
- Revela el color de fondo y el icono correspondiente detrás de la tarjeta
- Reduce la opacidad de la tarjeta conforme se aproxima al borde
- Dispara una vibración háptica ligera al rebasar el umbral de descarte
- Si no se supera el umbral, devuelve la tarjeta al reposo con un muelle
La fase de colapso de la lista
Una vez expulsada la tarjeta, los elementos inferiores deben ascender para llenar el hueco dejado. Animar height a 0 o utilizar técnicas FLIP con translateY produce un movimiento fluido sin saltos.
Disponibilidad de deshacer
El descarte por deslizamiento es propenso a errores fortuitos. Acompaña siempre la acción con una notificación flotante o toast con opción de 'Deshacer' durante varios segundos.
Principios clave para recordar
- Filtra el ángulo del gesto para no interferir con el scroll vertical
- Muestra acciones claras detrás de la tarjeta con pistas visuales
- Colapsa el espacio restante suavemente con animaciones de lista
- Ofrece siempre la opción de deshacer la acción
Preguntas frecuentes
Fuentes
- Lists: Swipe Actions — Apple Human Interface Guidelines
- Gestures: Dragging and Swiping — Material Design 3