Transizioni implicite

Le transizioni implicite animano automaticamente le modifiche a specifiche proprietà di UIElement. Invece di scrivere codice di animazione esplicito, si associa un oggetto di transizione a una proprietà e WinUI 3 anima in modo fluido qualsiasi modifica del valore.

WinUI 3 offre tre classi di transizione:

Classe di transizione Anima
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground sugli elementi che espongono ForegroundTransition (ad esempio, TextBlock)

Animare le modifiche di opacità

Associare un oggetto ScalarTransition alla OpacityTransition proprietà per animare le modifiche di opacità:

<Rectangle x:Name="MyRect" Width="80" Height="80" Opacity="1.0">
    <Rectangle.OpacityTransition>
        <ScalarTransition />
    </Rectangle.OpacityTransition>
</Rectangle>

Quando si modifica MyRect.Opacity il codice, WinUI 3 anima automaticamente la modifica:

MyRect.Opacity = 0.2;  // Animates from 1.0 to 0.2

Anima le modifiche alla rotazione

Allegare un oggetto ScalarTransition alla RotationTransition proprietà :

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.RotationTransition>
        <ScalarTransition />
    </Rectangle.RotationTransition>
</Rectangle>

// Read ActualWidth/ActualHeight in Loaded or SizeChanged — they are 0 until layout runs.
private void MyRect_Loaded(object sender, RoutedEventArgs e)
{
    MyRect.CenterPoint = new System.Numerics.Vector3(
        (float)MyRect.ActualWidth / 2,
        (float)MyRect.ActualHeight / 2,
        0f);
    MyRect.Rotation = 90;  // Animates to 90 degrees
}

Animare le modifiche alla scala

Allegare un oggetto Vector3Transition alla ScaleTransition proprietà :

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.ScaleTransition>
        <Vector3Transition />
    </Rectangle.ScaleTransition>
</Rectangle>

MyRect.Scale = new System.Numerics.Vector3(1.5f, 1.5f, 1.0f);  // Animates scale up

Animare le modifiche alla traduzione

Allegare un oggetto Vector3Transition alla TranslationTransition proprietà :

<Rectangle x:Name="MyRect" Width="80" Height="80">
    <Rectangle.TranslationTransition>
        <Vector3Transition />
    </Rectangle.TranslationTransition>
</Rectangle>

MyRect.Translation = new System.Numerics.Vector3(100, 0, 0);  // Moves 100px right

Animare le modifiche del pennello di sfondo

Associare un BrushTransition alla proprietà BackgroundTransition di un pannello o ContentPresenter:

<ContentPresenter x:Name="MyPresenter" Width="80" Height="80" Background="Blue">
    <ContentPresenter.BackgroundTransition>
        <BrushTransition />
    </ContentPresenter.BackgroundTransition>
</ContentPresenter>

// Animate from Blue to Yellow when the background is replaced with a new brush
MyPresenter.Background = new SolidColorBrush(Colors.Yellow);

Note

BrushTransition esegue l'animazione tra due istanze di pennello separate. L'impostazione di un nuovo colore sull'oggetto esistente SolidColorBrush non attiva la transizione. Assegnare un nuovo SolidColorBrush oggetto per attivare l'animazione.

Configurare la durata della transizione

Per impostazione predefinita, le transizioni usano una durata definita dalla piattaforma. È possibile eseguirne l'override con la Duration proprietà :

<Rectangle.OpacityTransition>
    <ScalarTransition Duration="0:0:0.5" />
</Rectangle.OpacityTransition>

Il valore Duration è un TimeSpan nel formato hours:minutes:seconds, con secondi frazionari opzionali (ad esempio, 0:0:0.5 per 500 ms).

Aprire l'app Raccolta WinUI 3 e visualizzare le transizioni implicite in azione

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3.

  • Last updated on