Ansicht mit Animation verschieben

Die Compose-Methode

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Verwenden von Animationen in Compose

Position animieren →

Objekte auf dem Bildschirm müssen aufgrund von Nutzerinteraktionen oder Hintergrundprozessen oft neu positioniert werden. Anstatt die Position des Objekts sofort zu aktualisieren, wodurch es von einem Bereich zum anderen blinkt, verwenden Sie eine Animation, um es von der Start- zur Endposition zu bewegen.

Eine Möglichkeit, Ansichtsobjekte auf dem Bildschirm neu zu positionieren, ist die Verwendung von ObjectAnimator. Sie geben die Endposition an, an der sich das Objekt befinden soll, sowie die Dauer der Animation. Sie können auch Zeitinterpolatoren verwenden, um die Beschleunigung oder Verlangsamung der Animation zu steuern.

Ansichtsposition mit ObjectAnimator ändern

Die ObjectAnimator -API bietet eine Möglichkeit, die Eigenschaften einer Ansicht mit einer bestimmten Dauer zu ändern. Sie 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, um Ihre Ansichten auf dem Bildschirm neu zu positionieren.

Hier ist ein Beispiel für einen ObjectAnimator, der die Ansicht in 2 Sekunden um 100 Pixel von der linken Seite des Bildschirms entfernt positioniert:

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 ObjectAnimator.ofFloat() Methode 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 sich die Ansicht horizontal bewegen muss, wird die Eigenschaft translationX verwendet. Der letzte Parameter ist der Endwert der Animation. In diesem Beispiel gibt der Wert 100 eine Position an, die viele Pixel von der linken Seite des Bildschirms entfernt ist.

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

Die letzte Methode führt die Animation aus und aktualisiert die Position der Ansicht auf dem Bildschirm.

Weitere Informationen zur Verwendung von ObjectAnimator finden Sie unter Mit ObjectAnimator animieren.

Gekrümmte Bewegung hinzufügen

Die Verwendung von ObjectAnimator ist zwar praktisch, aber standardmäßig wird die Ansicht entlang einer geraden Linie zwischen dem Start- und dem Endpunkt neu positioniert. Material Design verwendet Kurven für die räumliche Bewegung von Objekten auf dem Bildschirm und für das Timing einer Animation. Durch die Verwendung von gekrümmten Bewegungen erhält Ihre App ein materialähnlicheres Aussehen und Ihre Animationen werden interessanter.

Eigenen Pfad definieren

Die Klasse ObjectAnimator hat Konstruktoren, mit denen Sie Koordinaten mit zwei oder mehr Eigenschaften gleichzeitig entlang eines Pfads 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
}

So sieht die Bogenanimation aus:

Abbildung 1 : Eine Animation mit gekrümmtem Pfad.

Ein Interpolator ist eine Implementierung einer Easing-Kurve. Weitere Informationen zum Konzept der Easing-Kurven finden Sie in der Material Design-Dokumentation. 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 bereit:

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

PathInterpolator verwenden

Die PathInterpolator Klasse 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 Start- und Endpunkte, die auf (0,0) bzw. (1,1) festgelegt sind. Die anderen Konstruktorargumente hängen von der Art der zu erstellenden Bézier-Kurve ab.

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

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 wird eine Easing-Kurve erzeugt, die schnell beginnt und sich zum Ende hin verlangsamt.

Der kubische Bézier-Konstruktor hat ebenfalls feste Start- und Endpunkte, erfordert aber 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 emphasized decelerate von Material Design.

Für eine genauere Steuerung kann ein beliebiger Path verwendet werden, um die Kurve zu definieren:

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

Dadurch wird dieselbe Easing-Kurve wie im kubischen Bézier-Beispiel erzeugt, aber stattdessen wird 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 Animator.setInterpolator() Methode übergeben. Der Animator verwendet den Interpolator, um das Timing oder die Pfadkurve zu bestimmen, wenn er gestartet wird.

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

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