Menggerakkan Tampilan dengan animasi

Mencoba cara Compose

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

Menganimasikan posisi →

Objek di layar sering kali perlu diatur ulang posisinya karena interaksi pengguna atau pemrosesan di balik layar. Daripada langsung 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 mengatur ulang posisi 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

API ObjectAnimator 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 Anda di layar, gunakan atribut translationX dan translationY.

Berikut ini adalah 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 berupa float. 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 animasi. Dalam contoh ini, nilai 100 menunjukkan posisi yang banyak piksel dari kiri layar.

Metode berikutnya menentukan durasi animasi, dalam milidetik. Dalam contoh ini, animasi berjalan selama 2 detik (2000 milidetik).

Metode terakhir menyebabkan animasi yang dijalankan akan memperbarui posisi tampilan di layar.

Untuk mengetahui informasi selengkapnya tentang penggunaan ObjectAnimator, lihat Menganimasikan dengan ObjectAnimator.

Menambahkan gerakan melengkung

Meskipun ObjectAnimator mudah digunakan, secara default, ObjectAnimator akan mengubah posisi tampilan di sepanjang garis lurus antara titik awal dan titik akhir. Desain material bergantung pada kurva untuk pergerakan spasial objek di layar dan waktu animasi. Menggunakan gerakan melengkung membuat aplikasi Anda terasa lebih 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 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:

Gambar 1. Animasi jalur melengkung.

Interpolator adalah penerapan kurva easing. Lihat dokumentasi Desain Material untuk mengetahui informasi selengkapnya tentang konsep kurva kemudahan. Interpolator menentukan cara menghitung nilai tertentu dalam animasi sebagai fungsi dari 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 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), masing-masing. Argumen konstruktor lainnya bergantung pada jenis kurva Bézier yang dibuat.

Misalnya, untuk kurva Bézier kuadratik, 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();
}

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

Konstruktor Bézier kubik 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 penerapan kurva kemudahan ditekankan perlambatan Desain Material.

Untuk kontrol yang lebih baik, 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();
}

Hal ini menghasilkan kurva easing yang sama dengan contoh Bézier kubik, tetapi menggunakan Path.

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 waktu atau kurva 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();