Pelote
EN
Mouvement

Transitions

Entrées, dialogues, ripple et morphing de bouton, avec leurs courbes.

Catégorie: MouvementOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

LiveTransitions, relancées par le bouton

ExpressiveRéférence

Redémarrer le serveur ?Environ une minute d'arrêt.
Variables saved

Dialogue qui grandit, snackbar qui monte, bouton qui se déforme, coche qui se dessine.

PlazaWii U / 3DS

Redémarrer le serveur ?
Environ une minute d'arrêt.
Crash noté.

Bulle qui rebondit, bouton qui s'enfonce, pouce à ressort.

ChromeY2K

Confirm
Redémarrer le serveur ?
Variables saved

Fenêtre qui s'ouvre en fondu, dégradé du bouton qui s'inverse, piste qui s'allume.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Les animations déclenchées par une action : entrée d'un dialogue, arrivée d'une snackbar, bouton qui se déforme à l'appui, coche qui se dessine, pouce de switch à ressort. Le bouton « Rejouer » de l'aperçu les relance.

Durées et courbes

  • Changement d'état (survol, focus, couleur) : 150 à 200 ms, --ease.
  • Entrée (dialogue, snackbar, feuille) : 250 à 350 ms, --ease-decel ; sortie plus courte (150 à 200 ms).
  • Ressort Expressive (pouce de switch, morphing de bouton, tuile Plaza) : 250 ms, --ease-spring.
  • Coche : tracé de 250 ms.

Règles

  • Une transition raconte d'où vient l'élément : le dialogue grandit depuis le centre, la snackbar monte du bas.
  • Rien ne dépasse 400 ms ; rien ne bloque une action pendant qu'il s'anime.
  • prefers-reduced-motion : fondu court à la place des déplacements et des échelles.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.