Comment animer un tiroir ou panneau inférieur (Bottom Sheet) mobile
Apprenez à concevoir et animer un panneau inférieur mobile : suivi gestuel en temps réel, points d'ancrage, physique de ressort et gestion accessible du focus.
À retenir
Un panneau inférieur mobile intuitif suit le doigt en temps réel via transform: translateY. Au relâchement, il mesure la vélocité du geste et emploie un ressort physique pour choisir d'ancrer à mi-hauteur, s'ouvrir en grand ou se fermer. L'arrière-plan s'obscurcit proportionnellement à la hauteur et le focus clavier y reste confiné tant qu'il est ouvert.
Points d'ancrage et architecture d'états
Les panneaux inférieurs modernes gèrent plusieurs positions stables : replié, mi-hauteur et plein écran. Modélisez ces paliers comme des états discrets reliés par des ressorts qui s'activent selon l'inertie du geste de l'utilisateur.
Effet élastique aux limites
Lorsque l'utilisateur tire au-delà de la hauteur maximale ou vers le bas, appliquez une résistance progressive (effet élastique). Ce comportement communique physiquement que la limite du conteneur est atteinte.
- Appliquez une résistance logarithmique lors des dépassements
- Utilisez transform: translateY() pour assurer 60 ou 120 FPS
- Liez l'opacité du voile d'arrière-plan à la fraction d'ouverture du volet
- Fermez le tiroir si le glissement vers le bas dépasse un seuil de vitesse
Assombrissement du fond et gestes de fermeture
Toucher le voile semi-transparent doit fermer le panneau immédiatement avec une animation de sortie identique à celle d'un glissement rapide vers le bas.
Exigences d'accessibilité
Le panneau doit agir comme un dialogue modal avec role="dialog" et aria-modal="true". La touche Échap doit le fermer et le focus clavier doit y rester confiné tant qu'il est visible.
Principes clés à retenir
- Suivez le doigt en temps réel avec transform: translateY()
- Déterminez le point d'ancrage final selon la vitesse du geste
- Ajoutez une résistance élastique aux extrémités
- Piégez le focus clavier et permettez la fermeture par Échap
Questions fréquentes
Sources
- Bottom Sheets Pattern — Material Design 3
- Sheets Presentation — Apple Human Interface Guidelines