Communitygithub.com

motion-for-apple-platforms

Comment les interfaces Apple se déplacent — le vocabulaire des ressorts de SwiftUI (.smooth, .snappy, .bouncy) et quand les appliquer, les transitions interruptibles et pilotées par le geste, les transitions héros/continuité entre écrans, les micro-interactions couplées au haptique, et le respect de Reduce Motion. À utiliser pour animer tout ce qui doit avoir un rendu Apple-like, sur n'importe quelle plateforme : une transition SwiftUI, une animation CSS ou Framer Motion sur le web, une présentation de feuille ou de modale, une pression de bouton, un état de chargement ou de succès, ou lorsqu'une UI est techniquement correcte mais semble rigide, flottante ou laggy. À utiliser aussi pour évaluer un mouvement qui dépasse, rebondit là où il ne devrait pas, ou ne peut pas être interrompu en plein vol. Pour les règles d'Apple sur *s'il* faut animer, utilisez hig-guide ; pour la couleur, la typographie et la géométrie des contrôles, utilisez ui-kit-for-apple-platforms.

Qu'est-ce que motion-for-apple-platforms ?

Cette compétence fournit un guide pragmatique sur la façon dont les interfaces Apple se déplacent, en allant au-delà des principes généraux des HIG pour détailler la mécanique réelle : le vocabulaire des ressorts de SwiftUI (.smooth, .snappy, .bouncy) et quand les appliquer, les transitions interruptibles et pilotées par le geste, les micro-interactions couplées au haptique, et les transitions héros/continuité entre écrans. Elle est utile pour tout développeur ou designer qui veut rendre ses animations naturellement Apple-like, que ce soit en SwiftUI, en CSS, avec Framer Motion, ou dans toute autre technologie. La compétence clarifie l'origine des informations (principes officiels d'Apple, API SwiftUI, observations) et insiste sur l'importance du rebond comme signal distinctif, du respect de l'interruptibilité, et du suivi du doigt avant la prise en charge par le ressort. Elle aborde aussi le traitement approprié de Reduce Motion et établit des limites claires avec les autres compétences (hig-guide pour le « si » animer, ui-kit-for-apple-platforms pour les valeurs de couleur, typographie, etc.).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/doppe7gangar/hig/tree/main/.claude/skills/motion-for-apple-platforms

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Mouvement Apple

Les HIG couvrent le mouvement comme principe et s'arrêtent là. Leur page Motion contient 92 lignes sur s'il faut animer — intentionnellement, optionnellement, en suivant le geste — et pas un seul paramètre de ressort. Tout ce qui concerne la façon dont le mouvement est réellement construit se trouve en dehors, c'est pourquoi ce guide existe.

FichierContenu
references/motion-animation.mdLe vocabulaire des ressorts, durées, types de transition, interruptibilité.
references/microinteractions-feedback.mdÉtats de pression, chargement, retour de succès et d'erreur, couplage haptique.
references/gestures-interaction.mdBalayage, glissement, pincement, gestes de bord et comment le mouvement doit les suivre.

D'où vient chaque chose

Il faut être franc, car les trois sources ont des statuts très différents et les mélanger est la façon dont les conseils sur le mouvement deviennent du folklore :

  • Principes → hig-guide. "Ajoutez du mouvement avec intention." "Rendez le mouvement optionnel." "Recherchez un mouvement de retour réaliste qui suit les gestes et les attentes des personnes." Ce sont les mots mêmes d'Apple, dans Motion. Citez-les, pas les paraphrases ici.
  • Noms des ressorts et leur comportement → l'API de SwiftUI. .smooth, .snappy, .bouncy sont de vraies API avec des valeurs par défaut réelles. Les pourcentages de rebond dans motion-animation.md sont des caractérisations de celles-ci, pas des constantes publiées — traitez-les comme un point de départ que vous ajustez, et ne les citez pas comme une spécification d'Apple.
  • Tout le reste → observation. Ces références sont adaptées de la collection apple-design-skills sous licence MIT (mention dans LICENSE.txt) et sont marquées [observed] là où l' auteur a déduit le comportement d'applications existantes. Utiles, pas faisant autorité.

Rien ici n'est mesuré comme les valeurs de ui-kit-for-apple-platforms. Cette distinction est le point essentiel : le mouvement est la partie de ce dépôt qui a le moins de vérité terrain derrière elle.

Choisir un ressort

La décision qui porte la majeure partie de la sensation :

RessortRebondUtilisation pour
.smoothaucunFeuilles, modales, transitions d'arrière-plan — tout ce qui doit se stabiliser sans attirer l'attention
.snappylégerPressions de boutons, bascules, sélection — le défaut pour la manipulation directe
.bouncynotablePressions d'icônes, notifications qui arrivent, moments destinés à être gratifiants

Le rebond est tout le signal. Une feuille qui rebondit donne l'impression d'un jouet ; une pression de bouton qui ne rebondit pas donne l'impression d'un bouton mort. Bien choisir cette seule option fait plus que régler les durées.

Ce qui distingue le mouvement Apple du mouvement ordinaire

  • Interruptible. Un geste doit pouvoir inverser ou rediriger une animation en plein vol plutôt que de faire la queue derrière elle. Tout ce qui se termine avant de répondre semble laggy, quelle que soit sa rapidité.
  • Suit le doigt, puis prend le relais. Pendant un glissement, la surface suit le geste 1:1 ; le ressort ne prend le relais qu'au relâchement, en conservant la vélocité que le geste avait. C'est le principe des HIG "recherchez un mouvement de retour réaliste qui suit les gestes et les attentes des personnes" rendu concret.
  • La durée est une conséquence, pas une entrée. Les ressorts sont spécifiés par la physique et se stabilisent quand ils se stabilisent. Viser un 300 ms fixe signifie généralement utiliser le mauvais outil.
  • Position et opacité, pas taille et couleur. Se déplacer et s'estomper sont perçus comme physiques ; les effets de mise à l'échelle et de recoloration sont perçus comme des effets.

Reduce Motion n'est pas optionnel

hig-guide le dit clairement — "Rendez le mouvement optionnel." Sur le web, c'est prefers-reduced-motion, et cela signifie remplacer le mouvement, pas simplement le raccourcir : un fondu enchaîné au lieu d'un glissement, une coupe au lieu d'une animation. ui-kit-for-apple-platforms's ios-components.css protège déjà ses propres transitions de cette façon ; faites de même.

Limites

  • Les valeurs — couleur, typographie, géométrie des contrôles, matériaux — appartiennent à ui-kit-for-apple-platforms, mesurées à partir du kit UI d'Apple. Ne les reformulez pas ici ; un code hexadécimal dans un fichier de mouvement est un code hexadécimal qui va devenir obsolète quelque part où personne ne regarde.
  • Les règles sur si une chose doit être animée, quelle présentation utiliser, comment les mises en page s'adaptent — hig-guide, avec les citations réelles.
  • Cette compétence couvre comment le mouvement lui-même est construit.

Skills associés