Menggerakkan Tampilan dengan animasi

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan Animasi di Compose.

Animasi posisi →

Objek di layar sering kali perlu diatur ulang posisinya karena interaksi pengguna atau pemrosesan 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 memosisikan ulang objek tampilan di layar adalah dengan menggunakan ObjectAnimator. Anda memberikan posisi akhir yang Anda inginkan agar objek menetap, 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 yang Anda animasikan. Saat memposisikan ulang tampilan di layar, gunakan atribut translationX dan translationY.

Berikut adalah contoh ObjectAnimator yang memindahkan tampilan ke posisi 100 piksel dari kiri layar dalam 2 detik:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

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 banyak piksel dari kiri layar.

Metode berikutnya menentukan lamanya waktu yang dibutuhkan animasi, 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 ObjectAnimator mudah digunakan, secara default ObjectAnimator akan memosisikan ulang tampilan di sepanjang garis lurus antara titik awal dan titik akhir. Desain Material mengandalkan kurva untuk pergerakan spasial objek di layar dan pengaturan waktu animasi. Penggunaan gerakan melengkung memberi aplikasi Anda lebih banyak nuansa material sekaligus membuat animasi Anda 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:

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
}

Berikut inilah tampilan animasi lengkung:

Gambar 1. Animasi jalur melengkung.

Interpolator adalah implementasi kurva easing. Lihat dokumentasi Desain Material untuk mengetahui 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 Bézier atau objek Path. Contoh Android di 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 masing-masing 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:

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

Hal ini menghasilkan kurva easing yang dimulai dengan cepat dan melambat saat mendekati akhir.

Konstruktor cubic Bézier juga memiliki titik awal dan akhir yang tetap, tetapi memerlukan dua titik kontrol:

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

Ini adalah implementasi kurva easing deceleration yang ditekankan Desain Material.

Untuk kontrol yang lebih baik, Path arbitrer dapat digunakan untuk menentukan kurva:

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

Metode ini menghasilkan kurva easing yang sama seperti contoh cubic 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.

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

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