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 hatten Sie zwei 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 dem Element zugrunde liegenden visuellen Kompositionsobjekts und anschließendes Animieren des Visuals mit Kompositionsanimationen ist jedoch komplexer.

Ab Windows 10, Version 1809 können Sie Eigenschaften für ein UIElement direkt mithilfe von Kompositionsanimationen animieren, ohne das zugrunde liegende Kompositionsvisual abrufen zu müssen.

Hinweis

Um diese Eigenschaften auf UIElement verwenden zu können, muss die Zielversion Ihres UWP-Projekts 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-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und animation interop in Aktion zu sehen.

Neue Renderingeigenschaften ersetzen alte Renderingeigenschaften

Diese Tabelle zeigt die Eigenschaften, die Sie zum Ändern des Renderings eines UIElement verwenden können, das auch mit einer CompositionAnimation animiert werden kann.

Eigenschaft Typ BESCHREIBUNG
Deckkraft Double 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
Skalieren Vector3 Skalieren des Elements, zentriert auf dem CenterPoint
Drehung Float Drehen des Elements um 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 neuenMeasure-Anordnungsdurchlauf/ verursacht.

Diese Eigenschaften haben den gleichen Zweck und dasselbe Verhalten wie die eigenschaften mit ähnlichen Namen in der Visual-Klasse der Komposition (mit Ausnahme von Translation, die nicht in Visual vorhanden 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 Deckkrafteigenschaft, unabhängig davon, ob Sie XAML- oder Kompositionsanimationen verwenden.

Die Eigenschaften, die mit einer CompositionAnimation animiert werden können, ersetzen 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 das Visual mithilfe der folgenden Methoden abzurufen und zu verwalten:

Wichtig

Der Versuch, die Verwendung der beiden Eigenschaftensätze 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 sie löschen, obwohl es der Einfachheit halber nicht empfohlen wird. Wenn die Eigenschaft durch eine DependencyProperty-Eigenschaft unterstützt wird (z. B. UIElement.Projection wird von UIElement.ProjectionProperty unterstützt), rufen Sie ClearValue auf, um den Zustand "nicht verwendet" wiederherzustellen. Andernfalls (z. B. die Scale-Eigenschaft), legen Sie die Eigenschaft auf ihren 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 durch eine ExpressionAnimation verwiesen werden.

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

Beispiel: Animieren der Scale-Eigenschaft mit einer Vector3KeyFrameAnimation

In diesem Beispiel wird gezeigt, wie Sie die Skalierung 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 animiert, doppelt so groß (über 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);