Comment animer un contrôle de tirage pour actualiser (Pull-to-Refresh)
Découvrez comment concevoir l'animation de tirage pour actualiser : résistance progressive, franchissement de seuil, boucle de chargement et accessibilité.
À retenir
Le mouvement de tirage pour actualiser repose sur une résistance progressive. À mesure que l'utilisateur tire vers le bas, le déplacement visuel diminue de façon logarithmique. Au franchissement du seuil critique, un signal tactile ou visuel confirme l'engagement, l'indicateur s'active en boucle de chargement et la liste se maintient doucement pendant la réception des nouvelles données.
Physique de résistance pendant la traction
Un étirement direct 1:1 paraît incontrôlé. Appliquez une fonction de résistance où chaque pixel tiré par le doigt produit un déplacement visuel décroissant, simulant la tension d'un ressort mécanique.
Signal au franchissement du seuil et bascule d'état
Définissez une distance seuil précise (généralement entre 60 et 80 px). Dès que le tirage dépasse cette limite, l'icône pivote ou une brève vibration haptique confirme que relâcher lancera l'actualisation.
- Appliquez une résistance décroissante durant le tirage
- Fournissez une confirmation visuelle et haptique au seuil
- Maintenez la liste dans sa position de chargement sans à-coups
- Faites revenir la liste en douceur avec un ressort amorti
Éviter les conflits avec le défilement natif
N'autorisez le geste de tirage que si le conteneur est rigoureusement à scrollTop === 0. Si la page a déjà défilé, le geste doit agir comme un défilement ordinaire.
Alternatives pour l'accessibilité
Les gestes de tirage sont difficiles pour de nombreux utilisateurs. Fournissez toujours une alternative accessible, comme un bouton de rafraîchissement visible ou un raccourci clavier.
Principes clés à retenir
- Appliquez une résistance progressive pour éviter un étirement disproportionné
- N'activez le tirage que lorsque le défilement est rigoureusement au sommet
- Confirmez visuellement le passage du seuil avant le relâchement
- Offrez toujours un bouton d'actualisation accessible en complément
Questions fréquentes
Sources
- Swipe to Refresh Pattern — Material Design 3
- Touch and Gestures — Apple Human Interface Guidelines