Condividi tramite

Tempistica e interpolazione

  • Articolo

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

Esempi

Raccolta WinUI

Se è installata l'app WinUI 2 Gallery, fare clic qui per aprire l'app e vedere il controllo Easing Functions in azione.

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