Cómo animar un control de tirar para actualizar (Pull-to-Refresh)
Aprende a diseñar e implementar la animación de tirar para actualizar: resistencia física progresiva, umbral de activación, bucle de carga y retorno accesible.
Idea clave
El movimiento de tirar para actualizar se basa en la resistencia progresiva. A medida que el usuario arrastra hacia abajo, el desplazamiento visual se reduce logarítmicamente. Al cruzar el umbral crítico, una señal táctil o visual confirma la activación, el indicador gira o se transforma en spinner y la lista se sostiene suavemente mientras se reciben nuevos datos.
Física de resistencia durante el arrastre
Un arrastre 1:1 resulta incómodo y descontrolado. Aplica una función de resistencia donde cada píxel de arrastre del usuario produzca menos desplazamiento visual en el indicador, simulando la tensión de un resorte mecánico.
Retroalimentación en el umbral y cambio de estado
Define una distancia umbral clara (típicamente entre 60 y 80 px). Cuando el arrastre sobrepasa esa línea, el indicador debe cambiar de flecha a icono de carga o activar una vibración háptica ligera para confirmar que soltar actualizará la vista.
- Aplica resistencia decreciente durante la fase de arrastre
- Ofrece señal visual y háptica al superar el umbral
- Retén la lista en la posición de carga sin saltos bruscos
- Devuelve la lista a reposo con un muelle amortiguado al completar
Prevención de conflictos con el scroll nativo
Solo permite el gesto de tirar para actualizar cuando el contenedor se encuentra en la posición scrollTop === 0 exacta. Si la lista tiene scroll previo, el gesto debe actuar como desplazamiento normal.
Alternativas para accesibilidad
Los gestos de arrastre son difíciles para muchos usuarios. Proporciona siempre una alternativa accesible, como un botón de actualizar en la barra de herramientas o mediante atajo de teclado.
Principios clave para recordar
- Aplica resistencia progresiva para evitar que la lista se estire sin control
- Solo activa el gesto cuando el scroll esté en la posición superior exacta
- Confirma visualmente la superación del umbral antes de soltar
- Ofrece un botón de actualización accesible como alternativa
Preguntas frecuentes
Fuentes
- Swipe to Refresh Pattern — Material Design 3
- Touch and Gestures — Apple Human Interface Guidelines