Halaman ini diterjemahkan oleh Cloud Translation API.

Menggerakkan Tampilan dengan animasi

Objek di layar sering kali perlu diposisikan ulang karena interaksi pengguna atau proses di balik layar. Alih-alih segera memperbarui metode 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 ingin objek menetap serta durasi animasi. Anda dapat juga menggunakan interpolator waktu untuk mengontrol percepatan atau perlambatan 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 pandangan Anda pada layar, gunakan atribut translationX dan translationY.

Berikut adalah contoh ObjectAnimator yang memindahkan tampilan ke posisi 100 {i>pixel<i} dari sisi kiri layar dalam waktu 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 ObjectAnimator.ofFloat() , karena nilai terjemahan harus mengambang (float). Parameter pertama adalah tampilan yang ingin dianimasikan. Parameter kedua adalah properti yang Anda membuat animasi. Karena tampilan harus bergerak secara horizontal, translationX properti yang digunakan. Parameter terakhir adalah nilai akhir animasi. Di sini misalnya, nilai 100 menunjukkan posisi di mana banyak {i>pixel<i} dari sebelah kiri layar.

Metode berikutnya menentukan lamanya waktu yang dibutuhkan animasi, dalam milidetik. Di sini misalnya, animasi berjalan selama 2 detik (2000 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 akan mengubah posisi tampilan sepanjang garis lurus antara titik awal dan akhir. Bahan mengandalkan kurva untuk pergerakan spasial objek pada layar dan pengaturan waktu animasi. Menggunakan gerakan melengkung akan membuat aplikasi Anda terlihat lebih material sembari membuat animasi Anda lebih menarik.

Menentukan jalur Anda sendiri

Class ObjectAnimator memiliki konstruktor yang memungkinkan Anda menganimasikan koordinat menggunakan dua atau lebih properti sekaligus bersama dengan jalur. Sebagai contoh, animator berikut menggunakan sebuah Path untuk menganimasikan X dan Y properti 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 yang melengkung.

Interpolator adalah implementasi dari kurva easing. Lihat Dokumentasi Desain Material untuk informasi lebih lanjut tentang konsep kurva easing. Interpolator mendefinisikan bagaimana nilai tertentu dalam sebuah animasi dihitung sebagai fungsi dari baik. Sistem ini menyediakan sumber daya 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

Tujuan PathInterpolator adalah interpolator yang diperkenalkan di Android 5.0 (API 21). Hal ini didasarkan pada Kurva Bézier atau Objek Path. Contoh Android di Dokumentasi Desain Material untuk easing gunakan PathInterpolator.

PathInterpolator memiliki konstruktor berdasarkan berbagai jenis kurva Bézier. Semua kurva Bézier memiliki titik awal dan akhir yang tetap pada (0,0) dan (1,1), secara berurutan. Argumen konstruktor lainnya bergantung pada jenis Bézier kurva yang sedang dibuat.

Misalnya, untuk kurva Bézier kuadrat hanya koordinat X dan Y satu titik kontrol 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();
}

Fungsi ini menghasilkan kurva easing yang dimulai dengan cepat dan melambat seiring menjelang akhir cerita.

Konstruktor cubic Bézier juga memiliki titik awal dan akhir yang 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 dari Desain Material yang ditekankan melambat kurva easing.

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

Ini menghasilkan kurva easing yang sama seperti contoh cubic Bézier, tetapi menggunakan Sebagai gantinya, 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 Animator.setInterpolator() . Animator menggunakan interpolator untuk menentukan waktu atau jalur melengkung ketika 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();