Minutage et accélération

  • Article

Alors que le mouvement est basé dans le monde réel, nous sommes également un support numérique, qui vient avec une attente de vitesse et de performance.

Exemples

Galerie WinUI

Si l’application Galerie WinUI 2 est installée, cliquez ici pour ouvrir l’application et voir Fonctions d’accélération en action.

Valeurs de durée d’animation standard

WinUI fournit un ensemble de durées d’animation standard utilisées dans les contrôles de plateforme. Vous pouvez également utiliser ces ressources nommées lors de la création d’animations storyboard personnalisées.

ThemeResource Name Valeur
ControlNormalAnimationDuration 250 ms
ControlFastAnimationDuration 167 ms
ControlFasterAnimationDuration 83 ms

Accélération en mouvement Fluent

L’accélération est un moyen de manipuler la vitesse d’un objet lors de son déplacement. C’est la colle qui lie toutes les expériences de mouvement Fluent. Bien qu’extrême, l’accélération utilisée dans le système permet d’unifier l’impression physique des objets qui se déplacent dans tout le système. Il s’agit d’une façon d’imiter le monde réel et de faire en mouvement des objets comme ils appartiennent dans leur environnement.

Une courte vidéo montrant un cercle s’affiche à partir du coin inférieur droit du cadre et s’arrête près du coin supérieur gauche du cadre.

Appliquer l’accélération au mouvement

Ces accélérations vous aideront à obtenir une sensation plus naturelle et constituent la base de référence que nous utilisons pour fluent motion.

Sortie rapide, lent dans

cubic-bezier(0, 0, 0, 1)

Utiliser pour les objets ou l’interface utilisateur entrant dans la scène, en accédant ou en génèrent.

Une fois sur scène, l’objet est rencontré avec des frictions extrêmes, ce qui ralentit l’objet à reposer. L’impression résultante est que l’objet s’est déplacé d’une longue distance et entré à une vitesse extrême, ou revient rapidement à un état de repos.

Même si elle est précédée d’un moment de non réponse, la vitesse de l’objet entrant a l’effet de se sentir rapide et réactive.

décélération de l’accélération

Ralentissez, rapide dans

cubic-bezier(1 , 0 , 1 , 1)

Utiliser pour l’interface utilisateur ou les objets qui quittent la scène.

Les objets deviennent alimentés et gagnent en élan jusqu’à ce qu’ils atteignent la vitesse d’échappement. L’impression qui en résulte est que l’objet essaie son plus difficile de sortir de la façon de l’utilisateur et de faire place à de nouveaux contenus à entrer.

accélération de l’accélération