Aller au contenu
SkillCodex
Menu

Spring animation

Animation à ressort

Un ressort rejoint une cible selon sa raideur, sa masse et son amortissement. Un faible amortissement peut dépasser la cible ; un amortissement élevé supprime les oscillations.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r1
Sources
4 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : un objet se stabilise après un rebondréduire le rebond d’une carteun mouvement comme un ressort

Toutes les formulations
Enregistrer et partager

Reconnaître

Coût et limites documentés

Rendu DOM avec transform ou opacity via Web Animations API, sans dépendance d’animation ajoutée, Canvas ou WebGL. Le module est demandé au clic sur Charger la démo. Le ressort prépare 121 points une seule fois ; le navigateur pilote ensuite la lecture. Le reflet continu continue à consommer des ressources jusqu’à sa pause ou son démontage.

Ces propriétés peuvent éviter le recalcul de mise en page ; elles ne garantissent ni composition GPU ni fluidité sur appareil modeste. Batterie, GPU et performance sur matériel réel restent non mesurés. L’état statique et le texte restent la référence lorsque le système réduit le mouvement ou que l’API manque.

web.dev · rendu et coût · MDN · Web Animations API

Mouvement et effets

Essayer

Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?

Animation à ressort

Contexte commun aux essais

Un élément se déplace, change d’état ou attend un contenu. Quelle information doit rester sans mouvement ?

Animation à ressort

Aperçu statique : l’état et le résultat restent lisibles sans mouvement. Active la démo pour comparer le paramètre, mettre en pause et essayer le repli.

Passe l’amortissement de 10 à 20 avec une masse de 1 et une raideur de 100. Un faible amortissement dépasse la cible ; l’amortissement critique se stabilise sans oscillation. La démo échantillonne deux secondes puis rejoint la cible exacte.

Ce que cet essai montre

Le ressort modélise une réponse physique plutôt qu’une courbe temporelle fixe. Cette démo échantillonnée ne gère ni vitesse de geste ni changement de cible en cours.

Lequel convient à ton besoin ?

Animation à ressort

Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.

Courbe d’animation

Rends un petit déplacement plus facile à suivre avec une durée prévisible.

Quel composant utilises-tu ici ?
Différence et sources

Le ressort modélise une réponse physique plutôt qu’une courbe temporelle fixe. Cette démo échantillonnée ne gère ni vitesse de geste ni changement de cible en cours.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Déclencheur

    Le contrôle qui ouvre ou révèle la surface.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Mouvement et effets

      Animation à ressort appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Courbe d’animation

      Choisis Animation à ressort si tu cherches une réponse physique amortie. Choisis Courbe d’animation si tu cherches un rythme de durée fixée.

      Comparer cette paire
    • Ne pas confondre

      Transition d’état

      Choisis Animation à ressort si tu cherches une réponse physique amortie. Choisis Transition d’état si tu cherches un retour d’état persistant.

      Comparer cette paire
    • Ne pas confondre

      Reflet de chargement

      Choisis Animation à ressort si tu cherches une réponse physique amortie. Choisis Reflet de chargement si tu cherches une décoration facultative d’attente.

      Comparer cette paire
    • Ne pas confondre

      Mouvement réduit et repli

      Choisis Animation à ressort si tu cherches une réponse physique amortie. Choisis Mouvement réduit et repli si tu cherches le même résultat sans mouvement.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : animation à ressort

    • un objet se stabilise après un rebond
    • réduire le rebond d’une carte
    • un mouvement comme un ressort
    • ne plus dépasser la cible
    • l’amortissement change l’oscillation
    • une réponse physique après un glissement

    Choisir

    À utiliser quand

    • Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.

    À éviter quand

    • Évite le texte rebondissant, les retours répétés et la présentation d’une démo échantillonnée comme moteur de gestes de production.

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Joue le ressort avec un amortissement faible, puis augmente-le sans changer la masse ni la raideur.

      Résultat attendu

      La version moins amortie dépasse davantage la cible ; augmenter l’amortissement réduit les oscillations sans déplacer la cible.

    2. 2. À faire

      Laisse le déplacement finir, puis utilise Réinitialiser et Lecture au clavier.

      Résultat attendu

      L’objet se stabilise à la destination prévue, et les boutons restent utilisables avec un focus visible.

    3. 3. À faire

      Active le mode statique ou la réduction des animations de ton appareil, puis relance.

      Résultat attendu

      La position finale reste claire sans rebond ; aucune action n’oblige à attendre que le ressort se stabilise.

    Contrat complet
    1. 1Le résultat reste lisible sans animation
    2. 2Pause, réduction système et repli fonctionnent pendant la lecture
    3. 3Le démontage annule effets et écouteurs
    4. 4Seuls transform ou opacity changent ; le coût sur appareil reste non mesuré

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Animation à ressort sans casser son comportement

    # Implémenter Animation à ressort dans ton agent
    
    ## Objectif
    Implémente Animation à ressort pour ce comportement vérifié : Un ressort rejoint une cible selon sa raideur, sa masse et son amortissement. Un faible amortissement peut dépasser la cible ; un amortissement élevé supprime les oscillations.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme qu’Animation à ressort répond au besoin avant de coder.
    
    ## Comportement requis
    - Une région live annonce un nouvel état seulement si la mise à jour est importante et n’a pas déjà le focus.
    - L’activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.
    
    ## États à couvrir
    - Prêt — État initial statique
    - En cours — L’effet facultatif est en cours
    - En pause — La lecture est figée
    - Résultat — Résultat persistant sans mouvement nécessaire
    
    ## Accessibilité
    - Rôle ARIA : button + select + checkbox + status
    - Le contrôle principal ou la région nommée pour Animation à ressort possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
    - Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
    - Annonce les changements d’état par un texte concis, jamais les images de l’animation. Le visuel décoratif reste masqué aux technologies d’assistance.
    - Tab atteint chaque contrôle
    - Entrée ou Espace active les boutons ; les flèches changent le sélecteur natif ; Espace bascule la case du repli statique
    
    ## Quand ne pas utiliser
    - Évite le texte rebondissant, les retours répétés et la présentation d’une démo échantillonnée comme moteur de gestes de production.
    
    ## Critères d’acceptation
    - Le résultat reste lisible sans animation
    - Pause, réduction système et repli fonctionnent pendant la lecture
    - Le démontage annule effets et écouteurs
    - Seuls transform ou opacity changent ; le coût sur appareil reste non mesuré
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Animation à ressort sur un parcours réel

    # Vérifier Animation à ressort après l’implémentation
    
    ## Objectif
    Audite l’implémentation d’Animation à ressort au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:493476d30ed6543980842e14cb2b21f2a185514b84a5a7a06028a31772ddaf1a

    Diagnostiquer un problème

    Trouve et corrige le défaut d’Animation à ressort

    # Déboguer Animation à ressort dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés d’Animation à ressort.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le résultat reste lisible sans animation
    - Pause, réduction système et repli fonctionnent pendant la lecture
    - Le démontage annule effets et écouteurs
    - Seuls transform ou opacity changent ; le coût sur appareil reste non mesuré
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction d’Animation à ressort

    # Empêcher la régression d’Animation à ressort
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Animation à ressort aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:777f8c02ef1c559c7c189deb29e2034fed4d92cf282c8d5959edc6eaeb5d1e4d

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:eb889ca7e8286745f091af7f41a8dcd800ec8c22a49b1ef51ad81b9b0b8cebcf

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    button, label, select, input[type=checkbox] and decorative div

    NatifDémo native du navigateur, sans nouveau widget ARIA. Le contenu statique reste utilisable.

    Détails techniques

    Comportements

    • Annoncer les changements utiles

      Une région live annonce un nouvel état seulement si la mise à jour est importante et n'a pas déjà le focus.

    • Exécuter une action

      L'activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.

    États

    • Prêt

      État initial statique

    • En cours

      L’effet facultatif est en cours

    • En pause

      La lecture est figée

    • Résultat

      Résultat persistant sans mouvement nécessaire

    Transitions d’état

    • Prêt → En cours

      Active Lire lorsque le mouvement est disponible

    • En cours → En pause

      Active Pause

    • En cours → Résultat

      Termine ou active le repli statique

    Scénarios de test

    Contexte
    Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.
    Mission
    Passe l’amortissement de 10 à 20 avec une masse de 1 et une raideur de 100. Un faible amortissement dépasse la cible ; l’amortissement critique se stabilise sans oscillation. La démo échantillonne deux secondes puis rejoint la cible exacte.
    État principal
    Un ressort rejoint une cible selon sa raideur, sa masse et son amortissement. Un faible amortissement peut dépasser la cible ; un amortissement élevé supprime les oscillations.
    Cas limite
    La réduction système ou une API indisponible conserve la même information statique. Aucune opération de données ne dépend de la lecture.

    Signaux visuels

    • Un spécimen délimité avec un départ et un résultat visibles
    • Un texte lisible sans mouvement

    Signaux comportementaux

    • Passe l’amortissement de 10 à 20 avec une masse de 1 et une raideur de 100. Un faible amortissement dépasse la cible ; l’amortissement critique se stabilise sans oscillation. La démo échantillonne deux secondes puis rejoint la cible exacte.
    • Démarre sur demande ; pause et repli statique restent disponibles

    Accessibilité

    Rôle
    button + select + checkbox + status
    Nom accessible
    Le contrôle principal ou la région nommée pour Animation à ressort possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
    Fermeture
    Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
    Défilement
    L'activation du contrôle avec Espace ne fait pas défiler la page, et le retour apparaît sans déplacer le focus ni provoquer de saut inattendu.
    Annonce
    Annonce les changements d’état par un texte concis, jamais les images de l’animation. Le visuel décoratif reste masqué aux technologies d’assistance.
    Clavier
    • Tab atteint chaque contrôle
    • Entrée ou Espace active les boutons ; les flèches changent le sélecteur natif ; Espace bascule la case du repli statique

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • button, label, select, input[type=checkbox] and decorative div

      implementationKind
      custom
      nativeElement
      button, label, select, input[type=checkbox] and decorative div
      ariaPattern
      native controls and status text
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      exception
      sourceId
      source-ui-motion-waapi
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Démo native du navigateur, sans nouveau widget ARIA. Le contenu statique reste utilisable.

      Vérifier la source du binding

    Sources

    • Spring
      sourceId
      source-ui-motion-spring
      kind
      documentation
      canonicalUrl
      https://developer.apple.com/documentation/swiftui/spring
      publisher
      Apple Developer
      sourceRevision
      Wed, 16 Sep 2026 13:40:47 GMT
      consultedAt
      2026-09-16
      license
      Non indiquée
      contentDigest
      sha256:f4b0bbe0951c941951c25e32c2115947fa043a246d6ddd185b90e1614b835618
      status
      verified

      Affirmation couverte : Animation à ressort : Raideur, amortissement et réponse physique du ressort.

    • Web Animations API
      sourceId
      source-ui-motion-waapi
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:41 GMT
      consultedAt
      2026-09-16
      license
      Non indiquée
      contentDigest
      sha256:b030cde49d8dbf6294ab507e29a03d53591011c9bd11ca2d48d87182a0abd50b
      status
      verified

      Affirmation couverte : Animation à ressort : Lecture, pause et annulation des animations du navigateur.

    • prefers-reduced-motion
      sourceId
      source-ui-motion-reduction
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:49 GMT
      consultedAt
      2026-09-16
      license
      Non indiquée
      contentDigest
      sha256:573fe46ee27fed249d9c39e910a2a6c258cee26527e90554ba5b02eba1496fbf
      status
      verified

      Affirmation couverte : Animation à ressort : Préférences de mouvement et alternative statique.

    • High-performance animations
      sourceId
      source-ui-motion-performance
      kind
      documentation
      canonicalUrl
      https://web.dev/articles/animations-guide?hl=de
      publisher
      Google web.dev
      sourceRevision
      Tue, 06 Oct 2020 07:00:00 GMT
      consultedAt
      2026-09-16
      license
      Non indiquée
      contentDigest
      sha256:2f4492e9ba7b3679936eac2f1f1e6e42dcde7fc65bf29cf6f848d076df224acd
      status
      verified

      Affirmation couverte : Animation à ressort : Coût de rendu de transform et opacity ; la composition ne garantit pas les performances.