Ansicht mit Animation verschieben

Objekte auf dem Bildschirm müssen oft aufgrund von Nutzerinteraktionen oder Verarbeitungen im Hintergrund neu positioniert werden. Anstatt sofort die Position des Objekts zu aktualisieren, wodurch es von einem Bereich zum anderen blinkt, können Sie es mit einer Animation von der Startposition zu seiner Endposition verschieben.

Mit ObjectAnimator können Sie unter Android Ansichtsobjekte auf dem Bildschirm neu positionieren. Sie geben die Endposition an, in der sich das Objekt einfügt, sowie die Dauer der Animation. Sie können auch Zeitinterpolatoren verwenden, um die Beschleunigung oder Verzögerung der Animation zu steuern.

Ansichtsposition mit ObjectAnimator ändern

Mit der ObjectAnimator API können Sie die Attribute einer Ansicht mit einer angegebenen Dauer ändern. Sie enthält statische Methoden zum Erstellen von Instanzen von ObjectAnimator, abhängig vom Attributtyp, den Sie animieren. Verwenden Sie die Attribute translationX und translationY, um die Bildschirmansichten neu zu positionieren.

Hier ein Beispiel für ein ObjectAnimator-Objekt, bei dem die Ansicht in 2 Sekunden auf eine Position 100 Pixel vom linken Rand des Bildschirms verschoben wird:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

In diesem Beispiel wird die Methode ObjectAnimator.ofFloat() verwendet, da die Übersetzungswerte Gleitkommazahlen sein müssen. Der erste Parameter ist die Ansicht, die Sie animieren möchten. Der zweite Parameter ist die Eigenschaft, die Sie animieren. Da die Ansicht horizontal verschoben werden muss, wird das Attribut translationX verwendet. Der letzte Parameter ist der Endwert der Animation. In diesem Beispiel gibt der Wert 100 eine Position an, die viele Pixel vom linken Rand des Bildschirms entfernt ist.

Die nächste Methode gibt die Dauer der Animation in Millisekunden an. In diesem Beispiel dauert die Animation 2 Sekunden (2.000 Millisekunden).

Mit der letzten Methode wird die Animation ausgeführt, wodurch die Position der Ansicht auf dem Bildschirm aktualisiert wird.

Weitere Informationen zur Verwendung von ObjectAnimator finden Sie unter Animieren mit ObjectAnimator.

Kurvenbewegung hinzufügen

Die Verwendung von ObjectAnimator ist zwar praktisch, wird aber standardmäßig auf einer geraden Linie zwischen Start- und Endpunkt verschoben. Material Design beruht auf Kurven für die räumliche Bewegung von Objekten auf dem Bildschirm und den zeitlichen Ablauf einer Animation. Kurvenreiche Gesten verleihen Ihrer App einen materiellen Eindruck und machen die Animationen interessanter.

Eigenen Weg definieren

Die Klasse ObjectAnimator hat Konstruktoren, mit denen Sie Koordinaten mithilfe von zwei oder mehr Attributen gleichzeitig zusammen mit einem Pfad animieren können. Der folgende Animator verwendet beispielsweise ein Path-Objekt, um die X- und Y-Eigenschaften einer Ansicht zu animieren:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Die Bogenanimation sieht so aus:

Abbildung 1: Eine Animation eines gebogenen Pfads.

Ein Interpolator ist eine Implementierung einer Easing-Kurve. Weitere Informationen zum Konzept von Easing-Kurven finden Sie in der Dokumentation zu Material Design. Ein Interpolator definiert, wie bestimmte Werte in einer Animation als Funktion der Zeit berechnet werden. Das System stellt XML-Ressourcen für die drei grundlegenden Kurven in der Material Design-Spezifikation zur Verfügung:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

PathInterpolator verwenden

Die Klasse PathInterpolator ist ein Interpolator, der in Android 5.0 (API 21) eingeführt wurde. Sie basiert auf einer Bézier-Kurve oder einem Path-Objekt. In den Android-Beispielen in der Material Design-Dokumentation für Easing wird PathInterpolator verwendet.

PathInterpolator hat Konstruktoren, die auf verschiedenen Arten von Bézier-Kurven basieren. Alle Bézier-Kurven haben einen Start- und Endpunkt, der bei (0,0) bzw. (1,1) festgelegt ist. Die anderen Konstruktorargumente hängen vom Typ der Bézier-Kurve ab, die erstellt wird.

Für eine quadratische Bézier-Kurve werden beispielsweise nur die X- und Y-Koordinaten eines Kontrollpunkts benötigt:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Dadurch entsteht eine Easing-Kurve, die schnell beginnt und sich dem Ende nähert.

Der kubische Bézier-Konstruktor hat feste Start- und Endpunkte, erfordert jedoch zwei Kontrollpunkte:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Dies ist eine Implementierung der Easing-Kurve betont in Material Design.

Für eine bessere Kontrolle kann eine beliebige Path zur Definition der Kurve verwendet werden:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

Dies ergibt die gleiche Easing-Kurve wie das kubische Bézier-Beispiel, allerdings wird stattdessen ein Path verwendet.

Sie können auch einen Pfadinterpolator als XML-Ressource definieren:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

Nachdem Sie ein PathInterpolator-Objekt erstellt haben, können Sie es an die Methode Animator.setInterpolator() übergeben. Der Animator verwendet den Interpolator, um den Zeitpunkt oder die Pfadkurve beim Start zu bestimmen.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();