Raccolta didattica
Temporizzazione, interpolazione, direzionalità e gravità interagiscono per formare la base del movimento Fluent. Ognuno deve essere considerato nel contesto degli altri e applicato in modo appropriato nel contesto dell'app.
Ecco 3 modi per applicare nozioni fondamentali sul movimento Fluent nella tua app.
- Animazione implicita
Tween automatico e intervallo tra i valori in una modifica di parametro per ottenere un movimento Fluent molto semplice usando i valori standardizzati. - Animazione predefinita
I componenti di sistema, ad esempio i controlli comuni e il movimento condiviso, sono "Fluent per impostazione predefinita". I concetti fondamentali sono stati applicati in modo coerente con l'utilizzo implicito. - Animazione personalizzata seguendo le indicazioni consigliate
In alcuni casi il sistema non fornisce ancora una soluzione di movimento esatta per lo scenario. In questi casi, usare le raccomandazioni fondamentali di base come punto di partenza per le esperienze.
Esempio di transizione
Direzione in avanti:
Dissolvenza in uscita: 150m; Interpolazione: accelerazione predefinita della direzione in avanti in:
Scorrere verso l'alto 150 px: 300 ms; Interpolazione: decelerazione predefinita
Direzione indietro:
Scorrere verso il basso 150 px: 150 ms; Interpolazione: accelerazione predefinita direzione indietro in:
Dissolvenza in: 300 ms; Interpolazione: decelerazione predefinita
Esempio di oggetto
Direzione espandi:
Crescere: 300 ms; Interpolazione: Standard
Contratto di direzione:
Crescere: 150 ms; Interpolazione: accelerazione predefinita
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
Animazioni implicite
Le animazioni implicite sono un modo semplice per ottenere il movimento Fluent eseguendo automaticamente l'interpolazione tra i valori precedenti e nuovi durante una modifica del parametro.
È possibile animare in modo implicito le modifiche alle proprietà seguenti:
-
- Opacità
- Rotazione
- Ridimensiona
- Traduzione
Bordo, ContentPresenter o Pannello
- Background
Ogni proprietà che può avere modifiche animate in modo implicito ha una proprietà di transizione corrispondente. Per animare la proprietà, assegnare un tipo di transizione alla proprietà di transizione corrispondente. Questa tabella mostra le proprietà di transizione e il tipo di transizione da usare per ognuno di essi.
Questo esempio mostra come usare la proprietà Opacity e la transizione per rendere un pulsante dissolvenza quando il controllo è abilitato e dissolvenza quando è disabilitato.
<Button x:Name="SubmitButton"
Content="Submit"
Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
<Button.OpacityTransition>
<ScalarTransition />
</Button.OpacityTransition>
</Button>
public double OpaqueIfEnabled(bool IsEnabled)
{
return IsEnabled ? 1.0 : 0.2;
}
Piattaforma UWP e WinUI 2
Importante
Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.
Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.
- API UWP: Spazio dei nomi Windows.UI.Xaml.Media.Animation, spazio dei nomi Windows.UI.Xaml.Controls
- Api WinUI 2: spazio dei nomi Microsoft.UI.Xaml.Controls
- Aprire l'app Raccolta WinUI 2 e vedere Transizioni implicite in azione. L'app Raccolta WinUI 2 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 2. Ottenere l'app da Microsoft Store o visualizzare il codice sorgente in GitHub.
Le animazioni implicite richiedono Windows 10 versione 1809 (SDK 17763) o versioni successive.
