Diese Seite wurde von der Cloud Translation API übersetzt.

Ansicht mit Animation verschieben

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

Mit ObjectAnimator kannst du unter Android deine Ansichtsobjekte auf dem Bildschirm neu positionieren. Sie geben die Endposition an, an der das Objekt ankommen soll, 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 Eigenschaften einer Ansicht mit einer bestimmten Dauer ändern. Es enthält statische Methoden zum Erstellen von Instanzen von ObjectAnimator, je nachdem, welche Art von Attribut Sie animieren. Verwenden Sie die Attribute translationX und translationY, wenn Sie Ihre Ansichten auf dem Bildschirm neu positionieren.

Hier sehen Sie ein Beispiel für eine ObjectAnimator, mit der die Ansicht innerhalb von 2 Sekunden an eine Position 100 Pixel vom linken Rand des Bildschirms verschoben wird:

Kotlin

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

Java

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 animiert werden soll. Der zweite Parameter ist die Property, 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 in Millisekunden an, wie lange die Animation dauert. In diesem Beispiel dauert die Animation 2 Sekunden (2.000 Millisekunden).

Bei 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 Mit ObjectAnimator animieren.

Kurvenbewegung hinzufügen

Die Verwendung von ObjectAnimator ist zwar praktisch, aber standardmäßig wird die Ansicht entlang einer geraden Linie zwischen Start- und Endpunkte neu positioniert. Material Design beruht auf Kurven für die räumliche Bewegung von Objekten auf dem Bildschirm und die zeitliche Abfolge einer Animation. Gekrümmte Bewegungen verleihen Ihrer App eine mehr materielle Note, während Ihre Animationen interessanter werden.

Eigenen Weg definieren

Die Klasse ObjectAnimator hat Konstruktoren, mit denen Sie Koordinaten mit zwei oder mehr Eigenschaften gleichzeitig und mit einem Pfad animieren können. Im folgenden Beispiel wird beispielsweise ein Path-Objekt verwendet, um die X- und Y-Eigenschaften einer Ansicht zu animieren:

Kotlin

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
}

Java

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
}

So sieht die Bogenanimation aus:

Abbildung 1. Eine Animation mit gekrümmten Pfaden.

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

@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 mit Android 5.0 (API 21) eingeführter Interpolator. Sie basiert auf einer Bézierkurve oder einem Path-Objekt. In den Android-Beispielen in der Material Design-Dokumentation für die Überblendung wird PathInterpolator verwendet.

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

Für eine quadratische Bézierkurve sind beispielsweise nur die X- und Y-Koordinaten eines Kontrollpunkts erforderlich:

Kotlin

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

Java

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

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

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

Kotlin

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

Java

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 betonten Verzögerungskurve von Material Design.

Für mehr Kontrolle kann eine beliebige Path verwendet werden, um die Kurve zu definieren:

Kotlin

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()
}

Java

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 führt zu derselben Ease-Kurve wie im kubischen Bézier-Beispiel, verwendet aber stattdessen eine Path.

Sie können einen Pfad-Interpretor auch 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. Animator verwendet den Interpolator, um beim Start das Timing oder die Pfadkurve zu bestimmen.

Kotlin

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

Java

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