Freigeben über

Timing und Beschleunigung

  • Artikel

Während Bewegung auf der realen Welt basiert, sind wir auch ein digitales Medium, das mit einer Erwartung an Geschwindigkeit und Leistung kommt.

Beispiele

WinUI-Katalog

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

Standardanimationsdauerwerte

WinUI stellt eine Reihe von Standardanimationsdauern bereit, die während der gesamten Plattformsteuerelemente verwendet werden. Sie können diese benannten Ressourcen auch beim Erstellen von benutzerdefinierten Storyboardanimationen verwenden.

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

Beschleunigung in Fluent-Bewegung

Beschleunigung ist eine Möglichkeit, die Geschwindigkeit eines Objekts während des Reisens zu ändern. Es ist der Klebstoff, der alle Fluent-Bewegungserfahrungen miteinander verbindet. Während extrem, hilft das im System verwendete Beschleunigungsgefühl, das physische Gefühl von Objekten, die sich im gesamten System bewegen, zu vereinheitlichen. Dies ist eine Möglichkeit, die reale Welt nachzuahmen und Objekte in Bewegung zu machen, wie sie in ihrer Umgebung gehören.

Ein kurzes Video mit einem Kreis wird von der unteren rechten Ecke des Frames angezeigt und in der Nähe der oberen linken Ecke des Frames angehalten.

Anwenden von Beschleunigungen auf Bewegung

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

Schnell out, langsam in

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

Wird für Objekte oder UI-Eingaben in die Szene verwendet, entweder durch Navigieren oder Spawning.

Nach der Szene wird das Objekt mit extremer Reibung erfüllt, wodurch das Objekt zum Ruhen verlangsamt wird. Das resultierende Gefühl ist, dass das Objekt von einer langen Entfernung entfernt und in eine extreme Geschwindigkeit gelangt ist oder schnell in einen Ruhezustand zurückkehrt.

Selbst wenn es einem Moment unverantwortlicher Kraft vorausgeht, hat die Geschwindigkeit des eingehenden Objekts die Wirkung des Gefühls schnell und reaktionsfähig.

Beschleunigung der Beschleunigung verzögern

Langsam, schnell in

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

Wird für Ui- oder Objekte verwendet, die die Szene verlassen.

Objekte werden angetrieben und gewinnen Schwung, bis sie die Fluchtgeschwindigkeit erreichen. Das resultierende Gefühl besteht darin, dass das Objekt am schwierigsten versucht, aus dem Weg des Benutzers herauszuholen und Platz für neue Inhalte zu schaffen.

Beschleunigung beschleunigen