Aller au contenu
SkillCodex
Menu

Groupe de concepts

Mouvement et effets

Distingue rythme, ressort, retour d’état, décoration d’attente et alternatives statiques.

Essaie les 5 concepts, compare ce qui change, puis utilise le Pack adapté à ton besoin.

Essayer les composants

Mouvement et effets

Essayer

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

Courbe d’animation

Contexte commun aux essais

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

Courbe d’animation

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.

Compare linéaire et décélération sur la même distance et une durée pédagogique de 800 ms. La décélération avance plus vite au début et ralentit près de la cible.

Ce que cet essai montre

La courbe définit un rythme temporel ; le ressort évolue selon des paramètres physiques. Aucun des deux ne définit le sens du changement d’état.

Utiliser le Pack — Courbe d’animation

Lequel convient à ton besoin ?

Courbe d’animation

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

Animation à ressort

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

Quel composant utilises-tu ici ?
Lire le Pack completVérifier le résultat
Différence et sources

La courbe définit un rythme temporel ; le ressort évolue selon des paramètres physiques. Aucun des deux ne définit le sens du changement d’état.

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.

    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

    Les trois concepts

    ConceptCourbe d’animationUne courbe d’animation transforme le temps écoulé en progression sur une durée fixée. Elle change le rythme, pas la destination.OuvrirConceptAnimation à ressortUn 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.OuvrirConceptTransition d’étatUne transition d’état change un état utile, par exemple Brouillon vers Enregistré. L’animation peut renforcer ce retour ; elle ne détermine jamais si l’enregistrement a réussi.OuvrirConceptReflet de chargementLe shimmer ajoute un reflet mobile à un espace réservé pendant l’attente du contenu. Il ne donne ni pourcentage ni promesse sur le temps restant.OuvrirConceptMouvement réduit et repliLe mouvement réduit respecte la préférence d’une personne pour moins de mouvement. Un repli conserve la même information lorsque l’animation est désactivée ou indisponible.Ouvrir

    Les trois comparaisons

    ComparaisonCourbe d’animation vs Animation à ressortComparaisonCourbe d’animation vs Transition d’étatComparaisonCourbe d’animation vs Reflet de chargementComparaisonCourbe d’animation vs Mouvement réduit et repliComparaisonAnimation à ressort vs Transition d’étatComparaisonReflet de chargement vs Animation à ressortComparaisonMouvement réduit et repli vs Animation à ressortComparaisonReflet de chargement vs Transition d’étatComparaisonMouvement réduit et repli vs Transition d’étatComparaisonMouvement réduit et repli vs Reflet de chargement

    Signaux que tu les confonds

    Ces descriptions correspondent à tous les concepts du groupe : aucune ne suffit à décider.

    • un élément qui bouge
    • un état animé

    Autres groupes de concepts

    Groupe de conceptsPetites surfaces contextuellesGroupe de conceptsSurfaces modalesGroupe de conceptsSurfaces attachées à un bordGroupe de conceptsChoisir dans une listeGroupe de conceptsChoix et états binairesGroupe de conceptsChanger de vue ou révéler du contenuGroupe de conceptsInformer l'utilisateurGroupe de conceptsAttendre et suivre une progressionGroupe de conceptsDéclencher ou naviguerGroupe de conceptsSaisir du texteGroupe de conceptsS’orienter dans un parcoursGroupe de conceptsStructurer et explorer des données