Einfache Animationen in Xamarin.Forms

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Die ViewExtensions-Klasse stellt Erweiterungsmethoden bereit, die zum Erstellen einfacher Animationen verwendet werden können. In diesem Artikel wird das Erstellen und Abbrechen von Animationen mithilfe der ViewExtensions-Klasse veranschaulicht.

Die ViewExtensions -Klasse stellt die folgenden Erweiterungsmethoden bereit, die zum Erstellen einfacher Animationen verwendet werden können:

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 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. Daher sollte sie nur von Layout Unterklassen verwendet werden.

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 ist und true die Animation abgebrochen wird. Daher sollten die Animationsmethoden in der Regel mit dem await Operator verwendet werden, wodurch es möglich ist, einfach zu bestimmen, wann eine Animation abgeschlossen wurde. Darüber hinaus wird es dann 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 muss, kann der await Operator weggelassen werden. In diesem Szenario werden die Animationserweiterungsmethoden nach dem Initiieren der Animation schnell zurückgegeben, wobei die Animation im Hintergrund auftritt. Dieser Vorgang kann beim Erstellen zusammengesetzter Animationen genutzt werden. Weitere Informationen finden Sie unter Zusammengesetzte Animationen.

Weitere Informationen zum Operator finden Sie unter Übersicht über die awaitAsync-Unterstützung.

Einzelne Animationen

Jede Erweiterungsmethode im ViewExtensions implementiert einen einzelnen Animationsvorgang, der eine Eigenschaft über einen bestimmten Zeitraum schrittweise von einem Wert in einen anderen ändert. In diesem Abschnitt werden die einzelnen Animationsvorgänge erläutert.

Drehung

Im folgenden Codebeispiel wird die Verwendung der RotateTo -Methode zum Animieren der Rotation -Eigenschaft eines Imageveranschaulicht:

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

Dieser Code animiert die Image instance, indem er sich um bis zu 360 Grad über 2 Sekunden (2000 Millisekunden) dreht. Die RotateTo -Methode ruft den aktuellen Rotation Eigenschaftswert für den Anfang der Animation ab und rotiert dann von diesem Wert zum ersten Argument (360). Sobald die Animation abgeschlossen ist, wird die Eigenschaft des Bilds Rotation auf 0 zurückgesetzt. Dadurch wird sichergestellt, dass die Rotation Eigenschaft nach Abschluss der Animation nicht bei 360 verbleibt, was zusätzliche Drehungen verhindert.

Die folgenden Screenshots zeigen, wie die Drehung auf jeder Plattform ausgeführt wird:

Drehungsanimation

Hinweis

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

Relative Drehung

Das folgende Codebeispiel veranschaulicht die Verwendung der RelRotateTo -Methode zum inkrementellen Erhöhen oder Verringern der Rotation -Eigenschaft von Image:

await image.RelRotateTo (360, 2000);

Dieser Code animiert den Image instance, indem er sich um 360 Grad von seiner Startposition über 2 Sekunden (2000 Millisekunden) dreht. Die RelRotateTo -Methode ruft den aktuellen Rotation Eigenschaftswert für den Anfang der Animation ab und rotiert dann von diesem Wert zum Wert plus dem ersten Argument (360). Dadurch wird sichergestellt, dass jede Animation immer eine Drehung um 360 Grad von der Startposition hat. Wenn also eine neue Animation aufgerufen wird, während eine Animation bereits ausgeführt wird, beginnt sie an der aktuellen Position und endet möglicherweise an einer Position, die kein Inkrement von 360 Grad ist.

Die folgenden Screenshots zeigen die relative Drehung, die auf jeder Plattform ausgeführt wird:

Animation für relative Drehung

Skalierung

Im folgenden Codebeispiel wird die Verwendung der ScaleTo -Methode zum Animieren der Scale -Eigenschaft eines Imageveranschaulicht:

await image.ScaleTo (2, 2000);

Dieser Code animiert den Image instance, indem er über 2 Sekunden (2.000 Millisekunden) auf das Doppelte skaliert wird. Die ScaleTo -Methode ruft den aktuellen Scale Eigenschaftswert (Standardwert 1) für den Anfang der Animation ab und skaliert dann von diesem Wert auf das erste Argument (2). Dies hat zur Folge, dass die Größe des Bilds auf die doppelte Größe erweitert wird.

Die folgenden Screenshots zeigen die laufende Skalierung auf jeder Plattform:

Skalieren der Animation

Hinweis

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

Relative Skalierung

Im folgenden Codebeispiel wird die Verwendung der RelScaleTo -Methode zum Animieren der Scale -Eigenschaft eines Imageveranschaulicht:

await image.RelScaleTo (2, 2000);

Dieser Code animiert den Image instance, indem er über 2 Sekunden (2.000 Millisekunden) auf das Doppelte skaliert wird. Die RelScaleTo -Methode ruft den aktuellen Scale Eigenschaftswert für den Anfang der Animation ab und skaliert dann von diesem Wert auf den Wert plus dem ersten Argument (2). Dadurch wird sichergestellt, dass jede Animation von der Startposition aus immer eine Skalierung von 2 ist.

Skalieren und Drehen mit Ankern

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

Bei einer Image , die in der Mitte eines Layouts platziert wurde, veranschaulicht das folgende Codebeispiel das Drehen des Bilds um die Mitte des Layouts durch Festlegen AnchorY der -Eigenschaft:

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

Um die Image instance um die Mitte des Layouts zu drehen, müssen die AnchorX Eigenschaften und AnchorY auf Werte festgelegt werden, die relativ zur Breite und Höhe des Imagesind. In diesem Beispiel ist die Mitte von Image so definiert, dass sie sich in der Mitte des Layouts befindet, sodass der Standardwert AnchorX 0,5 keine Änderung erfordert. Die Eigenschaft wird jedoch neu definiert, AnchorY um einen Wert vom oberen Rand des Image bis zum Mittelpunkt des Layouts zu sein. Dadurch wird sichergestellt, dass eine Image vollständige Drehung von 360 Grad um den Mittelpunkt des Layouts ausgeführt wird, wie in den folgenden Screenshots gezeigt:

Drehungsanimation mit Ankern

Übersetzung

Das folgende Codebeispiel veranschaulicht die Verwendung der TranslateTo -Methode zum Animieren der TranslationX Eigenschaften und TranslationY von Image:

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

Dieser Code animiert die Image instance, indem er sie horizontal und vertikal über 1 Sekunde (1000 Millisekunden) übersetzt. Die TranslateTo -Methode übersetzt das Bild gleichzeitig 100 Pixel nach links und 100 Pixel nach oben. Dies liegt daran, dass das erste und das zweite Argument beide negative Zahlen sind. Die Angabe positiver Zahlen würde das Bild nach rechts und nach unten übersetzen.

Die folgenden Screenshots zeigen, wie die Übersetzung auf jeder Plattform ausgeführt wird:

Übersetzungsanimation

Hinweis

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

Ausblenden

Im folgenden Codebeispiel wird die Verwendung der FadeTo -Methode zum Animieren der Opacity -Eigenschaft eines Imageveranschaulicht:

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

Dieser Code animiert die Image instance, indem er ihn in mehr als 4 Sekunden (4000 Millisekunden) ausblendet. Die FadeTo -Methode ruft den aktuellen Opacity Eigenschaftswert für den Anfang der Animation ab und blendet dann von diesem Wert bis zum ersten Argument (1) aus.

Die folgenden Screenshots zeigen, dass die Einblendung auf jeder Plattform ausgeführt wird:

Fading Animation

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist eine sequenzielle Kombination von Animationen und kann mit dem await Operator erstellt werden, wie im folgenden Codebeispiel veranschaulicht:

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 der Image über 6 Sekunden (6000 Millisekunden) übersetzt. Die Übersetzung von Image verwendet fünf Animationen, wobei der await Operator angibt, dass jede Animation sequenziell ausgeführt wird. Daher werden nachfolgende Animationsmethoden ausgeführt, nachdem die vorherige Methode abgeschlossen wurde.

Zusammengesetzte Animationen

Eine zusammengesetzte Animation ist eine Kombination aus Animationen, bei der zwei oder mehr Animationen gleichzeitig ausgeführt werden. Zusammengesetzte Animationen können erstellt werden, indem erwartete und nicht erwartete Animationen gemischt werden, wie im folgenden Codebeispiel veranschaulicht:

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

In diesem Beispiel wird der Image skaliert und gleichzeitig über 4 Sekunden (4000 Millisekunden) gedreht. Die Skalierung von Image verwendet zwei sequenzielle Animationen, die gleichzeitig mit der Drehung auftreten. Die RotateTo -Methode wird ohne operator await ausgeführt und gibt sofort zurück, wobei die erste ScaleTo Animation dann beginnt. Der await Operator für den ersten ScaleTo Methodenaufruf verzögert den zweiten ScaleTo Methodenaufruf, bis der erste ScaleTo Methodenaufruf abgeschlossen ist. An diesem Punkt ist die RotateTo Animation halbwegs abgeschlossen und wird Image um 180 Grad gedreht. Während der letzten 2 Sekunden (2000 Millisekunden) werden sowohl die zweite ScaleTo Animation als auch die RotateTo Animation abgeschlossen.

Gleichzeitiges Ausführen mehrerer asynchroner Methoden

Die staticTask.WhenAny Methoden und Task.WhenAll werden verwendet, um mehrere asynchrone Methoden gleichzeitig auszuführen und können daher zum Erstellen zusammengesetzter Animationen verwendet werden. 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 ihrer 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 der Task.WhenAny Methodenaufruf zwei Aufgaben. Der erste Task rotiert das Bild über 4 Sekunden (4000 Millisekunden), und der zweite Vorgang skaliert das Bild über 2 Sekunden (2000 Millisekunden). Wenn 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 ihrer 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 der Task.WhenAll Methodenaufruf drei Aufgaben, die jeweils über 10 Minuten ausgeführt werden. Jede Task ergibt eine andere Anzahl von 360 Grad Drehungen – 307 Drehungen für RotateTo, 251 Drehungen für RotateXTound 199 Drehungen für RotateYTo. Bei diesen Werten handelt es sich um Primzahlen, sodass sichergestellt wird, dass die Drehungen nicht synchronisiert werden und daher nicht zu sich wiederholenden Mustern führen.

Die folgenden Screenshots zeigen die verschiedenen Drehungen, die auf jeder Plattform ausgeführt werden:

Zusammengesetzte Animation

Abbrechen von Animationen

Eine Anwendung kann eine oder mehrere Animationen mit einem Aufruf der CancelAnimations Erweiterungsmethode abbrechen, wie im folgenden Codebeispiel veranschaulicht:

image.CancelAnimations();

Dadurch werden sofort alle Animationen abgebrochen, die derzeit auf dem Image instance ausgeführt werden.

Zusammenfassung

In diesem Artikel wurde das Erstellen und Abbrechen von Animationen mithilfe der ViewExtensions -Klasse veranschaulicht. Diese Klasse stellt Erweiterungsmethoden bereit, mit denen einfache Animationen erstellt werden können, die Instanzen rotieren, skalieren, übersetzen und ausblenden VisualElement .