Freigeben über

Animieren von XAML-Elementen mit Kompositionsanimationen

  • Artikel

In diesem Artikel werden neue Eigenschaften vorgestellt, mit denen Sie ein XAML-UIElement mit der Leistung von Kompositionsanimationen und der Einfachen Einstellung von XAML-Eigenschaften animieren können.

Vor Windows 10, Version 1809, haben Sie 2 Optionen zum Erstellen von Animationen in Ihren UWP-Apps:

Die Verwendung der visuellen Ebene bietet eine bessere Leistung als die Verwendung der XAML-Konstrukte. Die Verwendung von ElementCompositionPreview zum Abrufen des zugrunde liegenden visuellen Kompositionsobjekts und anschließendes Animieren des visuellen Elements mit Kompositionsanimationen ist jedoch komplexer zu verwenden.

Ab Windows 10, Version 1809, können Sie Eigenschaften für ein UIElement direkt mithilfe von Kompositionsanimationen animieren, ohne dass die zugrunde liegende Komposition visual abgerufen werden muss.

Hinweis

Um diese Eigenschaften für UIElement zu verwenden, muss Ihre UWP-Projektzielversion 1809 oder höher sein. Weitere Informationen zum Konfigurieren Ihrer Projektversion finden Sie unter Versionsadaptive Apps.

Beispiele

WinUI 2-Katalog
WinUI-Katalog

Wenn Sie die WinUI 2 Gallery-App installiert haben, klicken Sie hier, um die App zu öffnen und die Animation interop in Aktion zu sehen.

Neue Renderingeigenschaften ersetzen alte Renderingeigenschaften

Diese Tabelle zeigt die Eigenschaften, mit denen Sie das Rendern eines UIElements ändern können, das auch mit einer CompositionAnimation animiert werden kann.

Eigenschaft Typ Beschreibung
Opacity Doppelt Der Grad der Deckkraft des Objekts
Übersetzung Vector3 Verschieben der X/Y/Z-Position des Elements
TransformMatrix Matrix4x4 Die Transformationsmatrix, die auf das Element angewendet werden soll
Skalierung Vector3 Skalieren des Elements, zentriert im CenterPoint
Drehung Gleitkomma Drehen des Elements um die RotationAxis und CenterPoint
RotationAxis Vector3 Die Drehachse
CenterPoint Vector3 Der Mittelpunkt der Skalierung und Drehung

Der Wert der TransformMatrix-Eigenschaft wird mit den Eigenschaften Scale, Rotation und Translation in der folgenden Reihenfolge kombiniert: TransformMatrix, Scale, Rotation, Translation.

Diese Eigenschaften wirken sich nicht auf das Layout des Elements aus, sodass das Ändern dieser Eigenschaften keinen neuen Messreihenfolgedurchlauf/ verursacht.

Diese Eigenschaften weisen denselben Zweck und das gleiche Verhalten wie die benannten Eigenschaften in der Visuellen Kompositionsklasse auf (mit Ausnahme der Übersetzung, die nicht in Visual enthalten ist).

Beispiel: Festlegen der Scale-Eigenschaft

In diesem Beispiel wird gezeigt, wie die Scale-Eigenschaft für eine Schaltfläche festgelegt wird.

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

Gegenseitige Exklusivität zwischen neuen und alten Eigenschaften

Hinweis

Die Opacity-Eigenschaft erzwingt nicht die in diesem Abschnitt beschriebene gegenseitige Exklusivität. Sie verwenden dieselbe Opacity-Eigenschaft, unabhängig davon, ob Sie XAML- oder Kompositionsanimationen verwenden.

Die Eigenschaften, die mit einer CompositionAnimation animiert werden können, sind Ersetzungen für mehrere vorhandene UIElement-Eigenschaften:

Wenn Sie eine der neuen Eigenschaften festlegen (oder animieren), können Sie die alten Eigenschaften nicht verwenden. Wenn Sie dagegen eine der alten Eigenschaften festlegen (oder animieren), können Sie die neuen Eigenschaften nicht verwenden.

Sie können die neuen Eigenschaften auch nicht verwenden, wenn Sie ElementCompositionPreview verwenden, um visual selbst mithilfe dieser Methoden abzurufen und zu verwalten:

Wichtig

Der Versuch, die Verwendung der beiden Eigenschaftengruppen zu kombinieren, führt dazu, dass der API-Aufruf fehlschlägt und eine Fehlermeldung erzeugt.

Es ist möglich, von einer Gruppe von Eigenschaften zu wechseln, indem sie gelöscht werden, obwohl es aus Gründen der Einfachheit nicht empfohlen wird. Wenn die Eigenschaft von einer DependencyProperty unterstützt wird (z. B. UIElement.Projection wird von UIElement.ProjectionProperty gesichert), rufen Sie ClearValue auf, um sie in den Zustand "nicht verwendet" wiederherzustellen. Andernfalls (z. B. die Scale-Eigenschaft) legen Sie die Eigenschaft auf den Standardwert fest.

Animieren von UIElement-Eigenschaften mit CompositionAnimation

Sie können die in der Tabelle aufgeführten Renderingeigenschaften mit einer CompositionAnimation animieren. Auf diese Eigenschaften kann auch von einer ExpressionAnimation verwiesen werden.

Verwenden Sie die StartAnimation - und StopAnimation-Methoden auf UIElement, um die UIElement-Eigenschaften zu animieren.

Beispiel: Animieren der Scale-Eigenschaft mit einer Vector3KeyFrameAnimation

In diesem Beispiel wird gezeigt, wie Sie den Maßstab einer Schaltfläche animieren.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

Beispiel: Animieren der Scale-Eigenschaft mit einer ExpressionAnimation

Eine Seite verfügt über zwei Schaltflächen. Die zweite Schaltfläche wird animiert, doppelt so groß (per Skalierung) wie die erste Schaltfläche zu sein.

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);