Dans les termes du Skill
Apple Design distille les conférences WWDC d'Apple sur l'interface, principalement Designing Fluid Interfaces (WWDC 2018), en règles pour construire une UI web fluide et physique. Il s'adresse aux designers et développeurs travaillant sur des interfaces gestuelles : glisser, balayer, feuilles (sheets), ressorts, momentum, transitions interruptibles, matériaux translucides et profondeur, typographie (taille optique, tracking, interlignage) et comportement à mouvement réduit.
Le fil conducteur est que le mouvement doit partir de la valeur actuelle affichée à l'écran, hériter de la vélocité de l'utilisateur, projeter le momentum vers l'avant, et être saisissable et réversible à tout instant. Les ressorts remplacent les animations à durée fixe car ils sont intrinsèquement interruptibles et sensibles à la vélocité, et le skill se conclut par les huit principes de design d'Apple utilisés comme vocabulaire commun.
Ce qu'il produit
- CSS de retour de pression qui met à l'échelle le contrôle au :active avec une transition ease-out de 100ms.
- Appels de ressort de mouvement montrant côte à côte l'amortissement critique par défaut et la variante de rebond de momentum.
- Un helper project() implémentant la projection de momentum avec un decelerationRate par défaut de 0.998.
- CSS de transparence réduite qui remplace les barres d'outils translucides par des fonds opaques sans flou.
Fonctionnement
- 01Répondre au pointer-down
Le retour appartient à la pression, pas au relâchement : mettez en évidence le contrôle dès l'instant où il est pressé, et considérez tout ce qui n'est pas essentiel sur le chemin de saisie, y compris le délai de tap de ~300ms, comme une régression.
- 02Suivre le pointeur au 1:1
Utilisez les Pointer Events avec capture afin que le suivi persiste même si le pointeur quitte les limites de l'élément, et respectez l'endroit où l'utilisateur a saisi l'élément plutôt que de vous recaler sur son centre.
- 03Rendre le mouvement interruptible
Un élément en mouvement doit pouvoir être saisi et inversé en plein vol ; l'utilisateur ne devrait jamais avoir à attendre la fin de l'animation en cours pour la rediriger.
- 04Modéliser le mouvement avec des ressorts
Un ressort absorbe une nouvelle entrée en changeant simplement sa cible, si bien que le mouvement reste continu ; les scripts à durée fixe n'ont rien à recibler.
- 05Transmettre la vélocité au relâchement
Donnez au ressort la vélocité du pointeur au moment du relâchement afin qu'il n'y ait aucune rupture entre le glissement et l'animation ; normalisez par la distance restante lorsque l'API attend une vélocité relative.
- 06Projeter l'inertie, puis se caler
Ne vous calez pas à l'endroit où le doigt a relâché l'élément : projetez la position de repos comme le ferait une décélération de défilement, et choisissez la cible de calage la plus proche de cette projection.