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 eine Eigenschaft im Laufe eines bestimmten Zeitraums von einem Wert in einen anderen wechselt.

Grundlegende Animationen können mit Erweiterungsmethoden erstellt werden, die von der ViewExtensions-Klasse bereitgestellt werden, die für VisualElement-Objekte verwendet werden:

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

Hinweis

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 ist false, wenn die Animation abgeschlossen wird, und true, wenn die Animation abgebrochen wird. Wenn Animationsvorgänge mit dem await-Operator kombiniert werden, ist es daher möglich, sequenzielle Animationen mit nachfolgenden Animationsmethoden zu erstellen, die nach Abschluss der vorherigen Methode ausgeführt werden. Weitere Informationen finden Sie unter Zusammengesetzte Animationen.

Wenn eine Animation im Hintergrund abgeschlossen werden soll, kann der await-Operator weggelassen werden. In diesem Szenario werden die Methoden für die Animationserweiterung schnell nach dem Initiieren der Animation zurückgegeben, wobei die Animation im Hintergrund abläuft. Dieser Vorgang kann beim Erstellen zusammengesetzter Animationen genutzt werden. Weitere Informationen finden Sie unter Kombinieren von Animationen.

Unter Android respektieren Animationen die Systemanimationseinstellungen:

  • Wenn die Animationen des Systems deaktiviert sind (entweder durch Barrierefreiheitsfeatures oder Entwicklerfeatures), springen neue Animationen sofort zum abgeschlossenen Zustand.
  • Wenn der Energiesparmodus des Geräts aktiviert wird, während Animationen ausgeführt werden, springen die Animationen sofort zum abgeschlossenen 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 abgeschlossenen Zustand.

Einfache 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

Eine Drehung erfolgt mit der RotateTo-Methode, die die Rotation-Eigenschaft 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 sich 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 verbleibt, wodurch zusätzliche Drehungen verhindert werden.

Hinweis

Zusätzlich zur RotateTo-Methode gibt es auch die Methoden RotateXTo und RotateYTo, die die Eigenschaften RotationY bzw. RotationX animieren.

Relative Drehung

Eine 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 bis zu 360 Grad von ihrer Ausgangsposition über 2 Sekunden gedreht (2000 Millisekunden). Die RelRotateTo-Methode ruft den aktuellen Rotation-Eigenschaftswert des Elements für den Anfang der Animation ab und dreht sich dann von diesem Wert auf den Wert plus das erste Argument (360). Dadurch wird sichergestellt, dass jede Animation immer eine Drehung von 360 Grad von der Ausgangsposition ist. 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

Eine 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 das bis zu Zweifache ihrer Größe über 2 Sekunden (2000 Millisekunden) skaliert. Die ScaleTo-Methode ruft den aktuellen Scale-Eigenschaftswert des Elements für den Anfang der Animation ab und skaliert dann von diesem Wert auf das erste Argument. Dadurch wird die Größe des Bilds das Zweifache seiner Größe erhöht.

Hinweis

Zusätzlich zur ScaleTo-Methode gibt es auch die Methoden ScaleXTo und ScaleYTo, die die Eigenschaften ScaleX buw. ScaleY animieren.

Relative Skalierung

Die 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 das bis zu Zweifache ihrer Größe über 2 Sekunden (2000 Millisekunden) skaliert. Die RelScaleTo-Methode ruft den aktuellen Scale-Eigenschaftswert des Elements für den Anfang der Animation ab und skaliert dann von diesem Wert auf den Wert plus das erste Argument. Dadurch wird sichergestellt, dass jede Animation immer auf das Doppelte der Ausgangsposition skaliert wird.

Skalierung und Drehung mit Anker

Die Eigenschaften AnchorX und AnchorY eines visuellen Elements legen die Mitte 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.

Da ein Image 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 AnchorY und AnchorX auf Werte festgelegt werden, die relativ zur Breite und Höhe des Image sind. In diesem Beispiel wird die Mitte des Image so definiert, dass sie in der Mitte des Layouts liegt, der Standardwert für AnchorX von 0,5 muss daher nicht geändert werden. Die AnchorY-Eigenschaft wird jedoch so neu definiert, dass sie einen Wert vom oberen Rand des Image bis zum Mittelpunkt des Layouts aufweist. Dadurch wird sichergestellt, dass das Image eine volle Drehung um 360 Grad um den Mittelpunkt des Layouts macht.

Übersetzung

Eine Übersetzung erfolgt mit der TranslateTo-Methode, die die Eigenschaften TranslationX und TranslationY 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 TranslateTo-Methode übersetzt gleichzeitig das Bild 100 geräteunabhängige Einheiten nach links und 100 geräteunabhängige Einheiten nach oben. Dies liegt daran, dass das ersten und das Argument negative Zahlen sind. Die Angabe positiver Zahlen würde das Bild nach rechts und unten übersetzen.

Wichtig

Wenn ein Element zunächst außerhalb des Bildschirms angeordnet und dann auf den Bildschirm übersetzt wird, verbleibt das Eingabelayout des Elements nach der Übersetzung außerhalb des Bildschirms und der/die Benutzer*in kann nicht damit interagieren. Daher wird empfohlen, dass eine Ansicht an ihrer endgültigen Position bearbeitet wird und dann alle erforderlichen Übersetzungen durchgeführt werden sollten.

Ausblenden

Das Ausblenden erfolgt mit der FadeTo-Methode, die die Opacity-Eigenschaft eines Elements schrittweise ändert:

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

In diesem Beispiel wird die Image-Instanz in über 4 Sekunden (4000 Millisekunden) ausgeblendet. Die FadeTo-Methode ruft den aktuellen Opacity-Eigenschaftswert des Elements für den Anfang der Animation ab und führt dann eine Ausblendung von diesem Wert auf das erste Argument aus.

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist eine sequenzielle Kombination von Animationen, die mit dem await-Operator erstellt werden kann:

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 übersetzt (6000 Millisekunden). Die Übersetzung des Image verwendet fünf Animationen, wobei der await-Operator angibt, dass jede Animation sequenziell ausgeführt wird. Daher werden nachfolgende Animationsmethoden nach Abschluss der vorherigen Methode ausgeführt.

Kombinieren von Animationen

Eine kombinierte Animation ist eine Kombination aus Animationen, bei denen zwei oder mehr Animationen gleichzeitig ausgeführt werden. Kombinierte Animationen können durch Kombinieren erwarteter und nicht erwartete Animationen erstellt werden:

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

In diesem Beispiel wird die Image-Instanz über 4 Sekunden (4000 Millisekunden) skaliert und gleichzeitig gedreht. Die Skalierung des Image verwendet zwei sequenzielle Animationen, die gleichzeitig mit der Drehung auftreten. Die RotateTo-Methode wird ohne await-Operator ausgeführt und sofort zurückgegeben, wobei die erste ScaleTo-Animation dann beginnt. Der await-Operator für die erste ScaleTo-Methode verzögert die zweite ScaleTo-Methode, bis die erste ScaleTo-Methode abgeschlossen ist. An diesem Punkt ist die RotateTo-Animation halb abgeschlossen, und die Image-Animation wurde um 180 Grad gedreht. Während der letzten 2 Sekunden (2000 Millisekunden) werden 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 gezeigt:

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). Nach Abschluss der zweiten Aufgabe 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 führt eine andere Anzahl von 360 Grad Drehungen durch – 307 Drehungen für RotateTo, 251 Drehungen für RotateXTo und 199 Drehungen für RotateYTo. Diese Werte sind Primzahlen, daher wird sichergestellt, dass die Drehungen nicht synchronisiert sind und daher nicht zu sich wiederholenden Mustern führen.

Abbrechen von Animationen

Eine App kann eine oder mehrere Animationen mit einem Aufruf der CancelAnimations-Erweiterungsmethode abbrechen:

image.CancelAnimations();

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