Ansicht mit Animation verschieben

Objekte auf dem Bildschirm müssen oft aufgrund einer hinter den Kulissen. Anstatt den Wert des Objekts durch die er von einem Bereich zum anderen aufblinkt, verwenden Sie eine Animation, und es von der Start- in die Endposition verschieben.

Eine Möglichkeit, wie Android dir die Positionierung deiner Objekte auf dem Bildschirm mit ObjectAnimator. Sie geben die Endposition an, und die Dauer der Animation. Sie können auch Zeitinterpolatoren, um die Beschleunigung oder Verzögerung Animation.

Ansichtsposition mit ObjectAnimator ändern

Die ObjectAnimator Die API bietet die Möglichkeit, die Eigenschaften einer Ansicht mit einer bestimmten Dauer zu ändern. Es enthält statische Methoden zum Erstellen von Instanzen von ObjectAnimator abhängig von welche Attributtypen Sie animieren. Bei der Neupositionierung Ihrer Ansichten verwenden Sie die Attribute translationX und translationY.

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

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() da die Übersetzungswerte Gleitkommazahlen sein müssen. Der erste Parameter ist Ansicht, die Sie animieren möchten. Der zweite Parameter ist die Eigenschaft, zu animieren. Da die Ansicht horizontal verschoben werden muss, ist der translationX verwendet wird. Der letzte Parameter ist der Endwert der Animation. In dieser Der Wert 100 gibt beispielsweise eine Position an, die viele Pixel von links auf dem Bildschirm.

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

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

Weitere Informationen zur Verwendung von ObjectAnimator finden Sie unter Animation mit ObjectAnimator

Kurvenbewegung hinzufügen

Die Verwendung von ObjectAnimator ist zwar praktisch, aber standardmäßig wird damit Ansicht entlang einer geraden Linie zwischen Start- und Endpunkt. Material auf Kurven für die räumliche Bewegung von Objekten auf dem Bildschirm das Timing einer Animation. Gekrümmte Bewegungen verleihen deiner App einen materielleren Eindruck und machen Ihre Animationen interessanter.

Eigenen Weg definieren

Die ObjectAnimator-Klasse verfügt über Konstruktoren, mit denen Sie Koordinaten animieren können. mit zwei oder mehr Eigenschaften gleichzeitig mit einem Pfad kombinieren. Für Im folgenden Beispiel wird ein Path-Objekt zum Animieren von X und Y Eigenschaften einer Ansicht:

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 mit gekrümmten Pfaden.

Ein Interpolator ist die Implementierung einer Easing-Kurve. Weitere Informationen finden Sie in der Material Design-Dokumentation finden Sie weitere Informationen zum Konzept der Easing-Kurven. Ein Interpolator definiert, wie bestimmte Werte in einer Animation als Funktion von . Das System stellt XML-Ressourcen für die drei Basiskurven im Material Design-Spezifikation:

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

PathInterpolator verwenden

Die PathInterpolator ist ein Interpolator, der mit Android 5.0 (API 21) eingeführt wurde. Sie basiert auf einem Bézierkurve oder a Path-Objekt. Die Android-Beispiele in der Material Design-Dokumentation für Easing Verwenden Sie PathInterpolator.

PathInterpolator hat Konstruktoren, die auf verschiedenen Arten von Bézier-Kurven basieren. Bei allen Bézierkurven liegen die Start- und Endpunkte bei (0,0) und (1,1) fest. . Die anderen Konstruktorargumente hängen vom Bézier-Typ ab. Kurve, die gerade erstellt wird.

Für eine quadratische Bézierkurve beispielsweise sind nur die X- und Y-Koordinaten eines Kontrollpunkts sind 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();
}

Dies erzeugt eine Easing-Kurve, die schnell beginnt und sich dabei verlangsamt. kurz vor dem Ende.

Der kubische Bézier-Konstruktor hat ebenfalls feste Start- und Endpunkte, erfordert 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 des betonten Material Design. verlangsamen Easing-Kurve.

Zur besseren Steuerung 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 erzeugt die gleiche Easing-Kurve wie das kubische Bézier-Beispiel, verwendet jedoch eine Stattdessen Path.

Sie können einen Pfadinterpolator 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 Animator.setInterpolator() . Animator verwendet den Interpolator, um den Zeitpunkt oder Pfad zu bestimmen Kurve, wenn es 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();