Objek di layar sering kali perlu diatur ulang posisinya. Hal ini dapat terjadi karena interaksi pengguna atau beberapa pemrosesan yang dilakukan di belakang layar. Sebagai gantinya segera perbarui posisi objek, yang akan menyebabkannya berkedip dari satu area ke area lain, Anda harus menggunakan animasi untuk memindahkannya dari posisi awal ke posisi akhirnya.
Android menyediakan cara yang memungkinkan Anda untuk mengatur ulang posisi objek tampilan di layar, seperti ObjectAnimator. Anda dapat memberikan posisi akhir yang Anda inginkan agar objek menetap, serta durasi animasi. Anda dapat menggabungkan ini dengan interpolator waktu untuk mengontrol akselerasi atau deselerasi animasi.
Mengubah posisi tampilan dengan ObjectAnimator
API ObjectAnimator menyediakan cara mudah untuk mengubah properti tampilan dengan durasi yang ditentukan. Ini berisi metode statis untuk membuat instance ObjectAnimator, bergantung pada jenis atribut apa yang Anda animasikan. Saat memposisikan ulang tampilan Anda di layar, gunakan atribut translationX dan translationY.
Berikut ini adalah contoh ObjectAnimator yang memindahkan tampilan ke 100 piksel dari kiri layar dalam 2 detik:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
duration = 2000
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();
Contoh ini menggunakan metode ObjectAnimator.ofFloat() karena nilai terjemahan harus mengambang. Parameter pertama adalah tampilan yang ingin Anda animasikan. Parameter kedua adalah properti yang Anda animasikan. Karena tampilan harus dipindahkan secara horizontal, properti translationX digunakan. Parameter terakhir adalah nilai akhir dari animasi. Karena nilai ini adalah 100, maka akan menjadi banyak piksel dari kiri layar.
Metode berikutnya menentukan lamanya waktu animasi yang diperlukan dalam milidetik. Dalam contoh ini, animasi akan berjalan selama 2 detik (2000 milidetik).
Metode terakhir menyebabkan animasi yang dijalankan akan memperbarui posisi tampilan di layar.
Untuk informasi selengkapnya cara menggunakan ObjectAnimator, lihat Menganimasikan dengan ObjectAnimator.
Menambahkan gerakan melengkung
Meskipun ObjectAnimator mudah digunakan, secara default ObjectAnimator akan mengubah posisi tampilan menggunakan garis lurus antara titik awal dan titik akhir. Desain material bergantung pada kurva tidak hanya waktu animasi, tetapi juga pergerakan spasial objek di layar. Menggunakan gerakan melengkung dapat membantu aplikasi Anda menemukan lebih banyak materi sekaligus membuat animasi Anda lebih menarik.
Menggunakan PathInterpolator
Class PathInterpolator adalah interpolator baru yang diperkenalkan di Android 5.0 (API 21). Class ini didasarkan pada kurva Bézier atau objek Path. Interpolator ini menetapkan kurva gerakan dalam persegi berukuran 1x1, dengan titik-titik link di (0,0) dan (1,1), serta titik kontrol sebagaimana ditetapkan menggunakan argumen konstruktor. Salah satu cara untuk membuat PathInterpolator adalah dengan membuat objek Path dan menambahkannya ke PathInterpolator:
Kotlin
// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val path = Path().apply {
arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
}
val pathInterpolator = PathInterpolator(path)
}
Java
// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Path path = new Path();
path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
PathInterpolator pathInterpolator = new PathInterpolator(path);
}
Anda juga bisa menetapkan interpolator jalur sebagai resource XML:
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
Setelah membuat objek PathInterpolator, Anda dapat meneruskannya ke metode Animator.setInterpolator(). Animator akan menggunakan interpolator untuk menentukan waktu atau kurva lokasi saat dimulai.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
interpolator = pathInterpolator
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(pathInterpolator);
animation.start();
Menentukan jalur Anda sendiri
Class ObjectAnimator memiliki konstruktor baru yang memungkinkan Anda untuk menganimasikan koordinat sepanjang jalur menggunakan dua atau beberapa properti sekaligus bersama dengan jalur. Misalnya, animator berikut menggunakan objek Path untuk menganimasikan properti X dan Y sebuah tampilan:
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
}
Berikut inilah tampilan animasi lengkung:
Jika Anda tidak ingin membuat kurva waktu atau jalur Anda sendiri, sistem akan menyediakan resource XML untuk tiga kurva dasar dalam spesifikasi desain material:
@interpolator/fast_out_linear_in.xml@interpolator/fast_out_slow_in.xml@interpolator/linear_out_slow_in.xml