Condividi tramite


Tempistica e interpolazione

Mentre il movimento è basato sul mondo reale, siamo anche un mezzo digitale, che viene fornito con un'aspettativa di velocità e prestazioni.

Esempi

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Valori di durata dell'animazione standard

WinUI fornisce un set di durate di animazione standard usate in tutti i controlli della piattaforma. È possibile usare queste risorse denominate anche quando si creano animazioni storyboard personalizzate.

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

Interpolazione nel movimento Fluent

L'interpolazione è un modo per manipolare la velocità di un oggetto mentre viaggia. È la colla che lega tutte le esperienze di movimento Fluent. Anche se estremo, l'interpolazione usata nel sistema aiuta a unificare l'aspetto fisico degli oggetti che si spostano in tutto il sistema. Questo è un modo per simulare il mondo reale e rendere gli oggetti in movimento sentirsi come appartengono nel loro ambiente.

Un breve video che mostra un cerchio viene visualizzato dall'angolo inferiore destro del fotogramma e si arresta vicino all'angolo superiore sinistro del fotogramma.

Applicare l'interpolazione al movimento

Queste interpolazioni ti aiuteranno a ottenere un aspetto più naturale e sono la linea di base usata per il movimento Fluent.

Fast Out, lento in

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

Usare per gli oggetti o l'interfaccia utente che entra nella scena, spostandosi o generando.

Una volta sulla scena, l'oggetto viene incontrato con un'estrema attrito, che rallenta il riposo dell'oggetto. L'impressione risultante è che l'oggetto si è spostato da una lunga distanza ed è entrato a una velocità estrema, o sta tornando rapidamente a uno stato di riposo.

Anche se è preceduto da un momento di inattività, la velocità dell'oggetto in ingresso ha l'effetto di sentirsi veloce e reattivo.

decelerazione dell'interpolazione

Rallenta, entra velocemente

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

Usare per l'interfaccia utente o gli oggetti che escono dalla scena.

Gli oggetti diventano alimentato e guadagnano slancio fino a raggiungere la velocità di fuga. L'impressione risultante è che l'oggetto sta tentando di uscire dal modo dell'utente e di liberare spazio per il nuovo contenuto.

accelerare l'interpolazione