Timing und Beschleunigung

  • Artikel

Während Bewegung in der realen Welt basiert, sind wir auch ein digitales Medium, das mit der Erwartung von Geschwindigkeit und Leistung eingeht.

Beispiele

WinUI-Katalog

Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und die Beschleunigungsfunktionen in Aktion zu sehen.

Standardwerte für die Animationsdauer

WinUI stellt eine Reihe von Standardanimationsdauern bereit, die in allen Plattformsteuerelementen verwendet werden. Sie können diese benannten Ressourcen auch beim Erstellen benutzerdefinierter Storyboardanimationen verwenden.

ThemeResource-Name Wert
ControlNormalAnimationDuration 250 ms
ControlFastAnimationDuration 167 ms
ControlFasterAnimationDuration 83 ms

Beschleunigung der Fließenden Bewegung

Die Beschleunigung ist eine Möglichkeit, die Geschwindigkeit eines Objekts während seiner Reise zu ändern. Es ist der Klebstoff, der alle Fluent-Bewegungserfahrungen miteinander verbindet. Obwohl extrem, hilft die im System verwendete Lockerung, das physische Gefühl von Objekten zu vereinheitlichen, die sich im gesamten System bewegen. Dies ist eine Möglichkeit, die reale Welt nachzuahmen und objekte in Bewegung wie in ihrer Umgebung zu fühlen.

Ein kurzes Video, das einen Kreis zeigt, der aus der unteren rechten Ecke des Frames angezeigt wird und in der Nähe der oberen linken Ecke des Frames angehalten wird.

Anwenden von Beschleunigungen auf Bewegung

Diese Lockerungen helfen Ihnen, ein natürlicheres Gefühl zu erreichen, und sind die Basis, die wir für Fluent-Bewegung verwenden.

Fast Out, Slow In

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

Verwenden Sie dies für Objekte oder Benutzeroberfläche, die in die Szene eintreten, entweder navigieren oder spawnen.

Nach der Szene wird das Objekt mit extremer Reibung getroffen, die das Objekt zum Ruhen verlangsamt. Das resultierende Gefühl ist, dass das Objekt aus einer großen Entfernung reiste und mit einer extremen Geschwindigkeit eintrat oder schnell in einen Ruhezustand zurückkehrt.

Auch wenn ihm ein Moment der Nichtreaktion vorausgeht, wirkt sich die Geschwindigkeit des eingehenden Objekts schnell und reaktionsschnell an.

Entschle rung

Langsam, schnell ein

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

Verwenden Sie dies für die Benutzeroberfläche oder Objekte, die die Szene verlassen.

Objekte werden angetrieben und gewinnen an Dynamik, bis sie die Escapegeschwindigkeit erreichen. Das resultierende Gefühl ist, dass das Objekt sich am schwersten bemüht, dem Benutzer aus dem Weg zu kommen und Platz für neue Inhalte zu schaffen.

Beschleunigung der Lockerung