Comment rendre une interaction de glissement tactile et physique
Concevez des interactions de glisser-déposer tactiles : suivi 1:1, transmission d'inertie au relâchement, résistance élastique et inclinaison dynamique.
À retenir
Pour conférer une sensation physique au glissement, liez les coordonnées du pointeur 1:1 avec transform: translate3d via les Pointer Events. Ajoutez une inclinaison proportionnelle à la vitesse horizontale pour évoquer la masse, appliquez une résistance élastique aux bordures et transférez le vecteur de vélocité finale dans une simulation de ressort au relâchement.
Supprimer la latence et le décalage de saisie
Rien ne ruine la crédibilité physique plus vite qu'un décalage entre le doigt et l'élément déplacé. Enregistrez le point exact de saisie au lieu de caler le coin supérieur de l'élément sur le curseur, et utilisez setPointerCapture pour ne jamais perdre le suivi hors du conteneur.
Inertie angulaire et inclinaison dynamique
Les objets physiques ne restent pas rigoureusement verticaux lorsqu'ils sont tirés sur une surface. Mesurez le déplacement horizontal (dx) et appliquez une légère rotation (dx * 0.05deg, bornée entre -8deg et +8deg) pour simuler la friction et le poids.
- Capturez les événements de pointeur dès pointerdown pour un suivi global
- Augmentez le z-index et diffusez une ombre portée au soulèvement
- Appliquez une inclinaison dynamique selon la vitesse de déplacement
- Associez une vibration haptique légère lors de la prise et du dépôt sur mobile
Résistance aux limites (effet élastique)
Lorsqu'un élément est tiré au-delà de sa zone permise, un arrêt brusque évoque un bug. Adoptez une fonction logarithmique pour que chaque pixel étiré exige un effort croissant, illustrant la tension d'un élastique.
Vélocité de relâchement et projection balistique
Au relâchement (pointerup), n'utilisez jamais une durée d'animation prédéfinie. Mesurez la vitesse sur les dernières images et transmettez-la à un solveur de ressort pour que l'élément glisse naturellement vers son emplacement de repos.
Principes clés à retenir
- Assurez un suivi direct 1:1 sans décaler l'origine de l'élément sous le doigt
- Intégrez une inclinaison subtile liée à la vitesse pour évoquer la masse
- Ajoutez une résistance élastique progressive contre les bordures
- Injectez la vitesse de lancer dans un ressort pour une trajectoire balistique crédible
Questions fréquentes
Sources
- Pointer Events Level 3 — W3C
- Tactile UI and Physical Depth — Nielsen Norman Group