Objek di layar sering kali perlu diposisikan ulang karena interaksi atau pemrosesan pengguna di balik layar. Daripada segera memperbarui posisi objek, yang menyebabkannya berkedip dari satu area ke area lain, gunakan animasi untuk memindahkannya dari posisi awal ke posisi akhirnya.
Salah satu cara Android memungkinkan Anda mengubah posisi objek tampilan di layar adalah dengan
menggunakan ObjectAnimator
. Anda memberikan posisi akhir yang Anda inginkan
untuk menyesuaikan objek serta durasi animasi. Anda juga
dapat menggunakan interpolator waktu untuk mengontrol akselerasi atau deselerasi
animasi.
Mengubah posisi tampilan dengan ObjectAnimator
ObjectAnimator
API menyediakan cara untuk mengubah properti tampilan dengan durasi yang ditentukan.
Class 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 contoh ObjectAnimator
yang memindahkan tampilan ke posisi 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 bergerak secara horizontal, properti translationX
digunakan. Parameter terakhir adalah nilai akhir animasi. Dalam
contoh ini, nilai 100 menunjukkan posisi yang berada jauh dari sisi kiri
layar.
Metode berikutnya menentukan berapa lama animasi berlangsung, dalam milidetik. Dalam contoh ini, animasi berjalan selama 2 detik (2.000 milidetik).
Metode terakhir menyebabkan animasi berjalan, yang memperbarui posisi tampilan di layar.
Untuk informasi selengkapnya tentang penggunaan ObjectAnimator
, lihat Menganimasikan menggunakan
ObjectAnimator.
Menambahkan gerakan melengkung
Meskipun mudah digunakan, ObjectAnimator
secara default memosisikan ulang
tampilan di sepanjang garis lurus antara titik awal dan akhir. Desain
material bergantung pada kurva untuk pergerakan spasial objek di layar dan
waktu animasi. Penggunaan gerakan melengkung akan memberi aplikasi Anda nuansa yang lebih
material sekaligus membuat animasi menjadi lebih menarik.
Menentukan jalur Anda sendiri
Class ObjectAnimator
memiliki konstruktor yang memungkinkan Anda menganimasikan koordinat
menggunakan dua atau beberapa properti sekaligus bersama dengan jalur. Misalnya, animator berikut menggunakan objek
Path
untuk menganimasikan properti X dan Y
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:
Gambar 1. Animasi jalur melengkung.
Interpolator
adalah implementasi dari kurva easing. Lihat
dokumentasi Desain Material
untuk informasi selengkapnya tentang konsep kurva easing. Interpolator
menentukan cara penghitungan nilai tertentu dalam animasi sebagai fungsi waktu. Sistem 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
Menggunakan PathInterpolator
Class
PathInterpolator
adalah interpolator yang diperkenalkan di Android 5.0 (API 21). Class ini didasarkan pada
Kurva Bezier atau
objek Path
. Contoh Android dalam dokumentasi Desain Material untuk
easing
menggunakan PathInterpolator
.
PathInterpolator
memiliki konstruktor berdasarkan berbagai jenis kurva Bézier.
Semua kurva Bézier memiliki titik awal dan akhir yang ditetapkan pada (0,0)
dan (1,1)
. Argumen konstruktor lainnya bergantung pada jenis kurva Bézier yang dibuat.
Misalnya, untuk kurva Bézier kuadrat, hanya koordinat X dan Y dari satu titik kontrol yang diperlukan:
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(); }
Cara ini menghasilkan kurva easing yang dimulai dengan cepat dan melambat saat mendekati akhir.
Konstruktor cubic Bézier juga memiliki titik awal dan akhir tetap, tetapi memerlukan dua titik kontrol:
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(); }
Ini adalah implementasi dari kurva easing perlambatan yang ditekankan Desain Material.
Untuk kontrol yang lebih besar, Path
arbitrer dapat digunakan untuk menentukan kurva:
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(); }
Contoh ini menghasilkan kurva easing yang sama dengan contoh kubik Bézier, tetapi menggunakan
Path
sebagai gantinya.
Anda juga bisa menetapkan interpolator jalur sebagai resource XML:
<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"/>
Setelah membuat objek PathInterpolator
, Anda dapat meneruskannya ke
metode
Animator.setInterpolator()
. Animator
menggunakan interpolator untuk menentukan kurva waktu atau
jalur saat dimulai.
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();