Udostępnij za pośrednictwem


Czas i ułatwianie

Chociaż ruch opiera się na świecie rzeczywistym, jesteśmy również medium cyfrowym, które wiąże się z oczekiwaniami szybkości i wydajności.

Przykłady

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Standardowe wartości czasu trwania animacji

Interfejs WinUI udostępnia zestaw standardowych czasów trwania animacji, które są używane w kontrolkach platformy. Te zasoby nazwane można również używać podczas tworzenia niestandardowych animacji Storyboard.

Nazwa źródła motywu Wartość
Czas trwania standardowej animacji (ControlNormalAnimationDuration) 250 ms
KontrolaSzybkiegoCzasuAnimacji 167 ms
KontrolaSzybszegoCzasuAnimacji 83 ms

Złagodzenie ruchu Fluent

Złagodzenie to sposób manipulowania szybkością obiektu podczas podróży. To klej, który łączy ze sobą wszystkie doświadczenia ruchu Fluent. Chociaż skrajne, złagodzenie używane w systemie pomaga zjednoczyć fizyczne uczucie obiektów poruszających się w całym systemie. Jest to jeden ze sposobów naśladowania świata rzeczywistego i sprawiają, że obiekty w ruchu czują się tak, jakby należały do swojego środowiska.

Krótkie wideo przedstawiające okrąg pojawia się z prawego dolnego rogu ramki i zatrzymuje się w pobliżu lewego górnego rogu ramki.

Stosowanie luzowania do ruchu

Te ułatwienia pomogą Ci osiągnąć bardziej naturalne wrażenie i stanowią podstawę, którą stosujemy w ruchu Fluent.

Szybkie wyjście, wolne wejście

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

Służy do wprowadzania obiektów lub interfejsu użytkownika do sceny, przemieszczania się lub generowania.

Na miejscu zdarzenia, obiekt spotyka się z ekstremalnym tarciem, co spowalnia obiekt do zatrzymania. Wrażenie jest takie, że obiekt podróżował z dużej odległości i wleciał z ogromną prędkością, lub szybko wraca do stanu spoczynku.

Nawet jeśli jest poprzedzona chwilą bezczynności, szybkość nadchodzącego obiektu sprawia wrażenie szybkiego i responsywnego działania.

spowalnianie procesu luzowania

Zwolnij na zewnątrz, szybko do środka

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

Służy do interfejsu użytkownika lub obiektów, które opuszczają scenę.

Obiekty stają się zasilane i nabierają tempa, aż osiągną prędkość ucieczki. Wrażenie jest takie, że obiekt stara się jak najbardziej zejść użytkownikowi z drogi i zrobić miejsce na nową zawartość.

przyspieszyć złagodzenie