Comment animer une carte avec glissement pour supprimer (Swipe to Dismiss)
Guide pour concevoir le geste de glissement pour supprimer : détection d'angle, fondu de sortie, repli fluide de la liste et option d'annulation.
À retenir
Le geste de glissement pour supprimer suit le doigt horizontalement avec transform: translateX, tout en réduisant l'opacité à mesure qu'il s'approche du bord. Si le seuil d'éjection est franchi ou que la vitesse de lancer est forte, la carte est chassée de l'écran et la liste comble l'espace vacant avec une transition fluide de hauteur ou translateY.
Suivi et détection de l'angle du geste
Pour ne pas déclencher une suppression involontaire lors du défilement vertical, examinez la trajectoire dès les 10 premiers pixels. Si le mouvement est majoritairement horizontal, verrouillez le scroll vertical et prenez le contrôle de la carte.
Indices visuels pendant le glissement
À mesure que la carte se déplace, révélez les actions d'arrière-plan (comme archiver ou supprimer) avec des couleurs ou des icônes qui s'agrandissent une fois le seuil franchi.
- Révélez la couleur d'action et l'icône derrière la carte
- Atténuez l'opacité de la carte à mesure qu'elle s'éloigne
- Déclenchez une légère vibration haptique au passage du seuil
- Ramenez la carte en position de repos si le seuil n'est pas atteint
La phase de repli de la liste
Une fois la carte éjectée, les éléments situés plus bas doivent remonter pour combler le vide. Animer height à 0 ou utiliser la technique FLIP avec translateY garantit une transition sans à-coups.
Disponibilité de l'option Annuler
La suppression par glissement entraîne parfois des erreurs involontaires. Accompagnez toujours l'action d'une notification toast avec un bouton 'Annuler' disponible pendant plusieurs secondes.
Principes clés à retenir
- Filtrez l'angle du geste pour ne pas entraver le défilement vertical
- Affichez des actions claires sous la carte avec repères visuels
- Repliez l'espace vacant avec des transitions de liste douces
- Offrez systématiquement une option pour annuler la suppression
Questions fréquentes
Sources
- Lists: Swipe Actions — Apple Human Interface Guidelines
- Gestures: Dragging and Swiping — Material Design 3