Comparaison comportementale
Courbe d’animation vs Reflet de chargement
Différence décisive
Courbe d’animation concerne un rythme de durée fixée ; Reflet de chargement concerne une décoration facultative d’attente. Les deux peuvent se combiner si le besoin le justifie.
Critères de choix, liens et sources
- Courbe d’animationChoisis Courbe d’animation si tu cherches un rythme de durée fixée.Ouvrir la fiche Courbe d’animation
- Reflet de chargementChoisis Reflet de chargement si tu cherches une décoration facultative d’attente.Ouvrir la fiche Reflet de chargement
Voir les neuf dimensionsVoir les sources
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.
Reflet de chargement
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 1 200 et 2 400 ms par passage. La vitesse change la décoration, pas le chargement. Afficher le contenu termine cette simulation locale ; aucune requête réseau n’est lancée.
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.
Lequel convient à ton besoin ?
Courbe d’animation
Rends un petit déplacement plus facile à suivre avec une durée prévisible.
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
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 sourcesParties 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.
Décision
Question de famille
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
Trois critères pour choisir
- Cas d’usage
Courbe d’animation
Rends un petit déplacement plus facile à suivre avec une durée prévisible.
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
- Interactivité
Courbe d’animation
Règle un paramètre pour un rythme de durée fixée ; mets en pause ou utilise un résultat statique.
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
- Comportement mobile
Courbe d’animation
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Neuf dimensions
- Déclenchement
Courbe d’animation
Activation explicite pour démontrer un rythme de durée fixée.
Reflet de chargement
Activation explicite pour démontrer une décoration facultative d’attente.
- Modalité
Courbe d’animation
Non modal ; le contenu environnant reste utilisable.
Reflet de chargement
Non modal ; le contenu environnant reste utilisable.
- Positionnement
Courbe d’animation
Dans un spécimen délimité ; aucune décoration globale.
Reflet de chargement
Dans un spécimen délimité ; aucune décoration globale.
- Interactivité
Courbe d’animation
Règle un paramètre pour un rythme de durée fixée ; mets en pause ou utilise un résultat statique.
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
- Focus
Courbe d’animation
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
Reflet de chargement
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
- Fermeture
Courbe d’animation
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
Reflet de chargement
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
- Rôle accessible
Courbe d’animation
button + select + checkbox + status
Reflet de chargement
button + select + checkbox + status
- Cas d’usage
Courbe d’animation
Rends un petit déplacement plus facile à suivre avec une durée prévisible.
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
- Comportement mobile
Courbe d’animation
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
| Dimension | Courbe d’animationEasing | Reflet de chargementSkeleton shimmer |
|---|---|---|
| Déclenchement | Activation explicite pour démontrer un rythme de durée fixée. | Activation explicite pour démontrer une décoration facultative d’attente. |
| Modalité | Non modal ; le contenu environnant reste utilisable. | Non modal ; le contenu environnant reste utilisable. |
| Positionnement | Dans un spécimen délimité ; aucune décoration globale. | Dans un spécimen délimité ; aucune décoration globale. |
| Interactivité | Règle un paramètre pour un rythme de durée fixée ; mets en pause ou utilise un résultat statique. | Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique. |
| Focus | Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton. | 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. | Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs. |
| Rôle accessible | button + select + checkbox + status | button + select + checkbox + status |
| Cas d’usage | Rends un petit déplacement plus facile à suivre avec une durée prévisible. | Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant. |
| Comportement mobile | Contrôles tactiles natifs ; la réduction système reste prioritaire. | Contrôles tactiles natifs ; la réduction système reste prioritaire. |