Freigeben über

Grundlegende Animation

  • Artikel

Die Animationsklassen der .NET Multi-Platform App UI (.NET MAUI) zielen auf unterschiedliche Eigenschaften visueller Elemente ab, wobei eine typische Grundanimation einen Parameter im Laufe eines bestimmten Zeitraums von einem Wert in einen anderen ändert.

Grundlegende Animationen können mit Erweiterungsmethoden erstellt werden, die von der ViewExtensions-Klasse bereitgestellt werden und auf VisualElement-Objekten arbeiten.

Standardmäßig dauert jede Animation 250 Millisekunden. Beim Erstellen der Animation kann jedoch eine Dauer für jede Animation angegeben werden.

Anmerkung

Die ViewExtensions-Klasse stellt auch eine LayoutTo-Erweiterungsmethode bereit. Diese Methode soll jedoch von Layouts verwendet werden, um Übergänge zwischen Layoutzuständen zu animieren, die Größen- und Positionsänderungen enthalten.

Die Animationserweiterungsmethoden in der ViewExtensions-Klasse sind alle asynchron und geben ein Task<bool>-Objekt zurück. Der Rückgabewert wird false, wenn die Animation abgeschlossen ist, und true, wenn die Animation abgebrochen wird. Daher ist es möglich, sequenzielle Animationen mit nachfolgenden Animationsmethoden zu erstellen, die nach Abschluss der vorherigen Methode ausgeführt werden, wenn Animationsvorgänge mit dem await-Operator kombiniert werden. Weitere Informationen finden Sie unter Verbundanimationen.

Wenn eine Animation im Hintergrund abgeschlossen werden muss, kann der await-Operator weggelassen werden. In diesem Szenario werden die Animationserweiterungsmethoden schnell nach dem Starten der Animation zurückgegeben, wobei die Animation im Hintergrund auftritt. Dieser Vorgang kann beim Erstellen zusammengesetzter Animationen genutzt werden. Weitere Informationen finden Sie unter Komposite Animationen.

Unter Android respektieren Animationen die Systemanimationseinstellungen:

  • Wenn die Animationen des Systems deaktiviert sind (entweder durch Barrierefreiheitsfunktionen oder Entwicklerfunktionen), springen neue Animationen sofort in ihren fertigen Zustand.
  • Wenn der Energiesparmodus des Geräts aktiviert wird, während Animationen ausgeführt werden, springen die Animationen sofort zum fertig gestellten Zustand.
  • Wenn die Animationsdauer des Geräts auf Null (deaktiviert) festgelegt ist, während Animationen ausgeführt werden und die API-Version 33 oder höher ist, springen die Animationen sofort in den enden Zustand.

Einzelne Animationen

Jede Erweiterungsmethode in der ViewExtensions Klasse implementiert einen einzelnen Animationsvorgang, der eine Eigenschaft schrittweise von einem Wert in einen anderen Wert über einen bestimmten Zeitraum ändert.

Drehung

Drehung erfolgt mit der RotateTo-Methode, die die Eigenschaft Rotation eines Elements schrittweise ändert.

await image.RotateTo(360, 2000);
image.Rotation = 0;

In diesem Beispiel wird eine Image Instanz um bis zu 360 Grad über 2 Sekunden gedreht (2000 Millisekunden). Die RotateTo -Methode ruft den aktuellen Rotation Eigenschaftswert des Elements für den Anfang der Animation ab und dreht dann von diesem Wert in das erste Argument (360). Sobald die Animation abgeschlossen ist, wird die Rotation Eigenschaft des Bilds auf 0 zurückgesetzt. Dadurch wird sichergestellt, dass die Rotation-Eigenschaft nach Abschluss der Animation nicht bei 360 bleibt, wodurch zusätzliche Drehungen verhindert werden.

Anmerkung

Neben der RotateTo-Methode gibt es auch die RotateXTo- und RotateYTo-Methoden, die die Eigenschaften RotationX bzw. RotationY animieren.

Relative Drehung

Die relative Drehung erfolgt mit der RelRotateTo-Methode, die die Rotation-Eigenschaft eines Elements schrittweise ändert.

await image.RelRotateTo(360, 2000);

In diesem Beispiel wird eine Image Instanz um 360 Grad von ihrer Startposition über 2 Sekunden gedreht (2000 Millisekunden). Die RelRotateTo Methode ruft den aktuellen Rotation Eigenschaftswert des Elements zu Beginn der Animation ab und rotiert dann von diesem Wert zu dem Wert plus dem ersten Argument (360). Dadurch wird sichergestellt, dass jede Animation immer eine 360-Grad-Drehung um die Ausgangsposition macht. Wenn daher eine neue Animation aufgerufen wird, während eine Animation bereits ausgeführt wird, beginnt sie von der aktuellen Position und kann an einer Position enden, die keine Inkrementierung von 360 Grad ist.

Skalierung

Die Skalierung erfolgt mit der ScaleTo-Methode, die die Scale Eigenschaft eines Elements schrittweise ändert:

await image.ScaleTo(2, 2000);

In diesem Beispiel wird eine Image Instanz innerhalb von zwei Sekunden (2000 Millisekunden) auf die doppelte Größe skaliert. Die ScaleTo-Methode ruft den aktuellen Wert der Scale-Eigenschaft des Elements zu Beginn der Animation ab und skaliert dann von diesem Wert auf das erste Argument. Dies hat die Auswirkung, die Größe des Bilds auf zweimal seine Größe zu erweitern.

Anmerkung

Neben der ScaleTo-Methode gibt es auch die ScaleXTo- und ScaleYTo-Methoden, die die Eigenschaften ScaleX bzw. ScaleY animieren.

Relative Skalierung

Relative Skalierung erfolgt mit der RelScaleTo-Methode, die die Scale Eigenschaft eines Elements schrittweise ändert:

await image.RelScaleTo(2, 2000);

In diesem Beispiel wird eine Image-Instanz auf die doppelte Größe skaliert und das über 2 Sekunden (2000 Millisekunden). Die RelScaleTo-Methode ermittelt den aktuellen Scale-Eigenschaftswert des Elements für den Beginn der Animation und skaliert dann von diesem Wert zu dem Wert plus seinem ersten Argument. Dadurch wird sichergestellt, dass jede Animation immer eine Skalierung von 2 von der Startposition aus ist.

Skalierung und Drehung mit Ankern

Die eigenschaften AnchorX und AnchorY eines visuellen Elements legen den Mittelpunkt der Skalierung oder Drehung für die eigenschaften Rotation und Scale fest. Daher wirken sich ihre Werte auch auf die methoden RotateTo und ScaleTo aus.

Angesichts einer Image, die in der Mitte eines Layouts platziert wurde, veranschaulicht das folgende Codebeispiel, wie das Bild um die Mitte des Layouts gedreht wird, indem die AnchorY-Eigenschaft festgelegt wird.

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Um die Image Instanz um die Mitte des Layouts zu drehen, müssen die Eigenschaften AnchorX und AnchorY auf Werte festgelegt werden, die relativ zur Breite und Höhe des Imagesind. In diesem Beispiel ist die Mitte des Image so definiert, dass sie sich in der Mitte des Layouts befindet. Daher muss der Standardwert AnchorX von 0,5 nicht geändert werden. Die AnchorY-Eigenschaft wird jedoch neu definiert, sodass sie einen Wert vom oberen Rand des Image bis zum Mittelpunkt des Layouts erreicht. Dadurch wird sichergestellt, dass die Image eine vollständige Drehung von 360 Grad um den Mittelpunkt des Layouts macht.

Übersetzung

Die Übersetzung erfolgt mit der TranslateTo-Methode, die die TranslationX und TranslationY Eigenschaften eines Elements schrittweise ändert:

await image.TranslateTo(-100, -100, 1000);

In diesem Beispiel wird die Image Instanz horizontal und vertikal über 1 Sekunde (1000 Millisekunden) übersetzt. Die Methode TranslateTo verschiebt das Bild gleichzeitig um 100 geräteunabhängige Einheiten nach links und um 100 geräteunabhängige Einheiten nach oben. Dies liegt daran, dass die ersten und zweiten Argumente beide negative Zahlen sind. Die Angabe positiver Zahlen würde das Bild nach rechts und unten verschieben.

Wichtig

Wenn ein Element zunächst außerhalb des Bildschirms angeordnet und dann auf den Bildschirm verschoben wird, bleibt das Layout zur Benutzereingabe des Elements nach der Verschiebung außerhalb des Bildschirms, und der Benutzer kann nicht damit interagieren. Daher wird empfohlen, dass eine Ansicht in ihrer endgültigen Position angeordnet wird und dann alle erforderlichen Übersetzungen durchgeführt werden.

Abschwächung

Das Verblassen wird mit der FadeTo-Methode durchgeführt, die die Opacity-Eigenschaft eines Elements schrittweise ändert:

image.Opacity = 0;
await image.FadeTo(1, 4000);

In diesem Beispiel wird die Image Instanz in mehr als 4 Sekunden ausgeblendet (4000 Millisekunden). Die FadeTo-Methode ruft den aktuellen Opacity-Eigenschaftswert des Elements für den Anfang der Animation ab und blendet dann von diesem Wert zum Wert des ersten Arguments ein.

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist eine sequenzielle Kombination von Animationen und kann mit dem operator await erstellt werden:

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

In diesem Beispiel wird die Image-Instanz über 6 Sekunden (6000 Millisekunden) hinweg übersetzt. Die Übersetzung von Image verwendet fünf Animationen, wobei der Operator await angibt, dass jede Animation nacheinander ausgeführt wird. Daher werden nachfolgende Animationsmethoden nach Abschluss der vorherigen Methode ausgeführt.

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist eine Kombination aus Animationen, bei denen zwei oder mehr Animationen gleichzeitig ausgeführt werden. Zusammengesetzte Animationen können erstellt werden, indem erwartete und nicht erwartete Animationen kombiniert werden:

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

In diesem Beispiel wird die Instanz Image skaliert und über 4 Sekunden gleichzeitig gedreht (4000 Millisekunden). Die Skalierung der Image erfolgt mit zwei aufeinanderfolgenden Animationen, die gleichzeitig mit der Drehung stattfinden. Die RotateTo-Methode wird ohne await-Operator ausgeführt und kehrt umgehend zurück, wobei die erste ScaleTo-Animation dann beginnt. Der await-Operator bei der ersten ScaleTo-Methode verzögert die zweite ScaleTo-Methode, bis die erste ScaleTo-Methode abgeschlossen ist. An diesem Punkt ist die RotateTo-Animation zur Hälfte abgeschlossen, und die Image wird um 180 Grad gedreht. Während der letzten 2 Sekunden (2000 Millisekunden) sind die zweite ScaleTo Animation und die RotateTo Animation abgeschlossen.

Gleichzeitiges Ausführen mehrerer Animationen

Die methoden Task.WhenAny und Task.WhenAll können verwendet werden, um mehrere asynchrone Methoden gleichzeitig auszuführen und daher zusammengesetzte Animationen zu erstellen. Beide Methoden geben ein Task-Objekt zurück und akzeptieren eine Auflistung von Methoden, die jeweils ein Task-Objekt zurückgeben. Die Task.WhenAny-Methode wird abgeschlossen, wenn eine Methode in der Auflistung die Ausführung abgeschlossen hat, wie im folgenden Codebeispiel veranschaulicht:

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

In diesem Beispiel enthält die Task.WhenAny-Methode zwei Aufgaben. Der erste Vorgang dreht eine Image Instanz über 4 Sekunden (4000 Millisekunden), und der zweite Vorgang skaliert das Bild über 2 Sekunden (2000 Millisekunden). Sobald die zweite Aufgabe abgeschlossen ist, wird der Task.WhenAny Methodenaufruf abgeschlossen. Obwohl die RotateTo-Methode noch ausgeführt wird, kann die zweite ScaleTo-Methode beginnen.

Die Task.WhenAll-Methode wird abgeschlossen, wenn alle Methoden in der Auflistung abgeschlossen sind, wie im folgenden Codebeispiel veranschaulicht:

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

In diesem Beispiel enthält die Task.WhenAll-Methode drei Aufgaben, die jeweils über 10 Minuten ausgeführt werden. Jede Task macht eine andere Anzahl von 360 Grad Drehungen – 307 Drehungen für RotateTo, 251 Drehungen für RotateXTound 199 Drehungen für RotateYTo. Diese Werte sind Primzahlen, daher wird sichergestellt, dass die Drehungen nicht synchronisiert werden und daher nicht zu sich wiederholenden Mustern führen.

Abbrechen von Animationen

Die CancelAnimations-Erweiterungsmethode wird verwendet, um Animationen wie Drehung, Skalierung, Verschiebung und Verblassen abzubrechen, die auf einem bestimmten VisualElementausgeführt werden.

image.CancelAnimations();

In diesem Beispiel werden alle Animationen, die in der Image Instanz ausgeführt werden, sofort abgebrochen.