Menggerakkan Tampilan dengan animasi

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