Condividi tramite

Animazioni in Windows app

Temporizzazione, interpolazione, direzionalità e gravità interagiscono per formare la base del movimento Fluent Motion. 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
    Interpolazione automatica e temporizzazione tra i valori durante una modifica dei parametri per ottenere un movimento Fluent molto semplice, utilizzando i valori standardizzati.
  • Animazione predefinita
    I componenti di sistema, come i controlli comuni e il movimento condiviso, sono "Fluent" di default. 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

animazione funzionale

Direzione in avanti:
Dissolvenza: 150m; Modifica della velocità: Accelerazione predefinita Direzione 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:
Tempo di dissolvenza: 300 ms; Interpolazione: Decelerazione Predefinita

Esempio di oggetto

Movimento di 300 ms

Direzione espandi:
Espansione: 300 ms; Effetto di transizione: Standard

Contratto di direzione:
Crescita: 150 ms; Interpolazione: Accelerazione Predefinita

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.

Aprire l'app Raccolta WinUI 3 e vedere Transizioni implicite in azione

Icona della raccolta WinUI 3 L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

È possibile animare in modo implicito le modifiche alle proprietà seguenti:

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 ciascuna.

Proprietà animata Proprietà di transizione Tipo di transizione implicita
UIElement.Opacity Transizione di opacità ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TraduzioneTransizione Vector3Transition
Border.Background Transizione in background BrushTransition
ContentPresenter.Background Transizione in background BrushTransition
Pannello_Sfondo Transizione in background BrushTransition

Questo esempio mostra come utilizzare la proprietà Opacity e la transizione per fare apparire un pulsante gradualmente quando il controllo è abilitato e scomparire gradualmente 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;
}
  • Last updated on