Transitions implicites

Les transitions implicites animent automatiquement les modifications apportées à des propriétés UIElement spécifiques. Au lieu d’écrire du code d’animation explicite, vous attachez un objet de transition à une propriété et WinUI 3 anime toutes les modifications de valeur en douceur.

WinUI 3 fournit trois classes de transition :

Classe de transition Anime
ScalarTransition Opacity, Rotation
Vector3Transition Scale, Translation
BrushTransition Background; Foreground sur les éléments qui exposent ForegroundTransition (par exemple, TextBlock)

Animer les modifications d’opacité

Attachez une ScalarTransition à la OpacityTransition propriété pour animer les modifications d’opacité :

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

Lorsque vous changez MyRect.Opacity de code, WinUI 3 anime automatiquement la modification :

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

Animer les changements de rotation

Attachez une ScalarTransition à la RotationTransition propriété :

<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
}

Animer les changements d’échelle

Attachez une Vector3Transition à la ScaleTransition propriété :

<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

Animer les modifications de traduction

Attachez une Vector3Transition à la TranslationTransition propriété :

<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

Animer les modifications de la brosse d’arrière-plan

Associez une BrushTransition à la propriété BackgroundTransition d’un panneau ou de 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 s’anime entre deux instances de pinceau distinctes. La définition d’une nouvelle couleur sur l’objet existant SolidColorBrush ne déclenche pas la transition. Affectez un nouvel SolidColorBrush objet pour déclencher l’animation.

Configurer la durée de transition

Par défaut, les transitions utilisent une durée définie par la plateforme. Vous pouvez le remplacer par la Duration propriété :

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

La valeur Duration est un(e) TimeSpan au format hours:minutes:seconds, avec des secondes fractionnaires facultatives (par exemple, 0:0:0.5 pour 500 ms).

Ouvrez l’application galerie WinUI 3 et consultez les transitions implicites en action

L’application Galerie WinUI 3 inclut des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 3.

  • Last updated on