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:
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()
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:
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 }
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:
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 dabei verlangsamt. kurz vor dem Ende.
Der kubische Bézier-Konstruktor hat ebenfalls feste Start- und Endpunkte, erfordert 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 des betonten Material Design. verlangsamen Easing-Kurve.
Zur besseren Steuerung kann eine beliebige Path
zur Definition der Kurve verwendet werden:
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 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.
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();