Beschleunigungsfunktionen in Xamarin.Forms

  • Artikel

Xamarin.Forms enthält eine Easing-Klasse, mit der Sie eine Übertragungsfunktion angeben können, die steuert, wie Animationen während der Ausführung beschleunigen oder verlangsamen. In diesem Artikel wird veranschaulicht, wie Sie die vordefinierten Beschleunigungsfunktionen nutzen und benutzerdefinierte Beschleunigungsfunktionen erstellen.

Die Easing-Klasse definiert eine Reihe von Easingfunktionen, die von Animationen genutzt werden können:

  • Die BounceIn-Easingfunktion lässt die Animation am Anfang abprallen.
  • Die BounceOut-Easingfunktion lässt die Animation am Ende abprallen.
  • Die CubicIn-Easingfunktion beschleunigt die Animation langsam.
  • Die CubicInOut-Easingfunktion beschleunigt die Animation am Anfang und verzögert die Animation am Ende.
  • Die CubicOut-Easingfunktion verzögert die Animation schnell.
  • Die Linear-Easingfunktion verwendet eine konstante Geschwindigkeit und ist die standardmäßige Easingfunktion.
  • Die SinIn-Easingfunktion beschleunigt die Animation reibungslos.
  • Die SinInOut-Easingfunktion beschleunigt die Animation am Anfang reibungslos und verzögert die Animation am Ende reibungslos.
  • Die SinOut-Easingfunktion verzögert die Animation reibungslos.
  • Die SpringIn-Easingfunktion bewirkt, dass die Animation zum Ende hin sehr schnell beschleunigt wird.
  • Die SpringOut-Easingfunktion bewirkt, dass die Animation zum Ende hin schnell verzögert wird.

Die In und Out-Suffixe geben an, ob der von der Easingfunktion erzeugt Effekt am Anfang der Animation, am Ende oder in beiden Fällen bemerkbar ist.

Darüber hinaus können benutzerdefinierte Easingfunktionen erstellt werden. Weitere Informationen finden Sie unter Benutzerdefinierte Beschleunigungsfunktionen.

Verwenden einer Beschleunigungsfunktion

Mit den Animationserweiterungsmethoden in der ViewExtensions Klasse kann eine Beschleunigungsfunktion als endgültiger Methodenparameter angegeben werden, wie im folgenden Codebeispiel veranschaulicht:

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

Durch die Angabe einer Easingfunktion für eine Animation wird die Animationsgeschwindigkeit nicht linear und erzeugt den Effekt, der von der Easingfunktion vorgesehen ist. Wenn beim Erstellen einer Animation eine Easingfunktion weggelassen wird, wird die Animation mit der standardmäßigen Linear Easingfunktion verwendet, die eine lineare Geschwindigkeit erzeugt.

Hinweis

Xamarin.Forms 5.0 enthält einen Typkonverter, der eine Zeichenfolgendarstellung einer Beschleunigungsfunktion in das entsprechende Easing Enumerationselement konvertiert. Dieser Typkonverter wird automatisch für alle Eigenschaften des Typs Easing aufgerufen, die in XAML festgelegt sind.

Weitere Informationen zur Verwendung der Animationserweiterungsmethoden in der ViewExtensions Klasse finden Sie unter "Einfache Animationen". Easingfunktionen können auch von der Animation-Klasse genutzt werden. Weitere Informationen finden Sie unter "Benutzerdefinierte Animationen".

Benutzerdefinierte Beschleunigungsfunktionen

Es gibt drei Standardansätze zum Erstellen einer benutzerdefinierten Easingfunktion:

  1. Erstellen Sie eine Methode, die ein double-Argument verwendet, und ein double Ergebnis liefert.
  2. Erstellen Sie eine Func<double, double>.
  3. Geben Sie die Easingfunktion als Argument für den Easing-Konstruktor an.

In allen drei Fällen sollte die benutzerdefinierte Beschleunigungsfunktion 0 für ein Argument von 0 und 1 für ein Argument von 1 zurückgeben. Ein beliebiger Wert kann jedoch zwischen den Argumentwerten 0 und 1 zurückgegeben werden. Jeder Ansatz wird nun wiederum diskutiert.

Benutzerdefinierte Easing-Methode

Eine benutzerdefinierte Beschleunigungsfunktion kann als Methode definiert werden, die ein double Argument verwendet und ein double Ergebnis zurückgibt, wie im folgenden Codebeispiel veranschaulicht:

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

await image.TranslateTo(0, 200, 2000, (Easing)CustomEase);

Die CustomEase Methode schneidet den eingehenden Wert auf die Werte 0, 0,2, 0,4, 0,6, 0,8 und 1 ab. Daher wird die Image-Instanz in separaten Sprüngen und nicht reibungslos übersetzt.

Benutzerdefinierter Beschleunigungs-Func

Eine benutzerdefinierte Beschleunigungsfunktion kann auch wie im folgenden Codebeispiel veranschaulicht als eine Func<double, double>definiert werden:

Func<double, double> CustomEaseFunc = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEaseFunc);

Dies CustomEaseFunc stellt eine Beschleunigungsfunktion dar, die schnell startet, den Kurs verlangsamt und umgekehrt und dann den Kurs wieder umkehrt, um schnell zum Ende zu beschleunigen. Während die Gesamtbewegung der Image-Instanz also nach unten gerichtet ist, kehrt sie nach der Hälfte der Animation vorübergehend ihren Kurs um.

Benutzerdefinierter Beschleunigungskonstruktor

Eine benutzerdefinierte Beschleunigungsfunktion kann auch als Argument für den Easing Konstruktor definiert werden, wie im folgenden Codebeispiel veranschaulicht:

await image.TranslateTo (0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

Die benutzerdefinierte Beschleunigungsfunktion wird als Lambda-Funktionsargument für den Easing Konstruktor angegeben und verwendet die Math.Cos Methode, um einen langsamen Drop-Effekt zu erstellen, der von der Math.Exp Methode gedämpft wird. Daher wird die Image Instanz übersetzt, damit sie an den endgültigen Ruheort fällt.

Zusammenfassung

In diesem Artikel wurde erläutert, wie Sie die vordefinierten Beschleunigungsfunktionen nutzen und benutzerdefinierte Beschleunigungsfunktionen erstellen. Xamarin.Forms enthält eine Easing Klasse, mit der Sie eine Übertragungsfunktion angeben können, mit der gesteuert wird, wie Animationen die Ausführung beschleunigen oder verlangsamen.