Menggerakkan tampilan menggunakan animasi fling

Animasi berbasis fling menggunakan gaya gesekan yang berbanding lurus dengan kecepatan objek. Gunakan animasi ini untuk menganimasikan properti objek dan mengakhirinya secara bertahap. Animasi ini memiliki momentum awal, yang sebagian besar diterima dari kecepatan gestur, dan melambat secara bertahap. Animasi akan berakhir saat kecepatannya sudah cukup rendah sehingga tidak ada perubahan yang tampak di layar perangkat.

Gambar 1. Animasi fling

Untuk mempelajari topik-topik yang terkait, baca panduan berikut:

Menambahkan support library

Untuk menggunakan support library berbasis fisika, Anda harus menambahkan support library tersebut ke project Anda sebagai berikut:

  1. Buka file build.gradle untuk modul aplikasi Anda.
  2. Tambahkan support library ke bagian dependencies.
          dependencies {
              implementation 'com.android.support:support-dynamic-animation:28.0.0'
          }
          

Membuat animasi fling

Class FlingAnimation memungkinkan Anda membuat animasi fling untuk sebuah objek. Untuk membuat animasi fling, buat instance class FlingAnimation dan sediakan objek serta properti objek yang ingin Anda animasikan.

Kotlin

    val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)
    

Java

    FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
    

Mengatur kecepatan

Kecepatan awal menentukan kecepatan perubahan properti animasi di awal animasi. Kecepatan awal default ditetapkan ke nol piksel per detik. Oleh karena itu, Anda harus menentukan kecepatan awal untuk memastikan animasi tidak langsung berakhir.

Anda dapat menggunakan nilai tetap sebagai kecepatan awal, atau mendasarkannya pada kecepatan gestur sentuh. Jika memilih untuk memberikan nilai tetap, Anda harus menentukan nilai dalam dp per detik, lalu mengonversinya menjadi piksel per detik. Dengan menentukan nilai dalam dp per detik, kecepatan tidak akan terpengaruh oleh kepadatan layar dan faktor bentuk perangkat. Untuk informasi selengkapnya tentang mengonversi kecepatan awal menjadi piksel per detik, lihat bagian Mengonversi dp per detik menjadi piksel per detik dalam Animasi Pegas.

Untuk menetapkan kecepatan, panggil metode setStartVelocity() dan teruskan kecepatan dalam piksel per detik. Metode ini akan menampilkan objek fling sesuai dengan kecepatan yang ditetapkan.

Catatan: Gunakan class GestureDetector.OnGestureListener dan VelocityTracker untuk, berturut-turut, mengambil dan menghitung kecepatan gestur sentuh.

Menetapkan rentang nilai animasi

Anda dapat menetapkan nilai animasi minimum dan maksimum jika ingin membatasi nilai properti ini ke rentang tertentu. Kontrol rentang ini sangat berguna jika Anda menganimasikan properti yang memiliki rentang intrinsik, seperti alfa (dari 0 hingga 1).

Catatan: Setelah nilai animasi fling mencapai nilai minimum atau maksimumnya, animasi akan berakhir.

Untuk menetapkan nilai minimum dan maksimum, panggil, berturut-turut, metode setMinValue() dan setMaxValue(). Kedua metode ini menampilkan objek animasi yang telah Anda tetapkan nilainya.

Menetapkan gesekan

Metode setFriction() memungkinkan Anda mengubah gesekan animasi. Metode ini menentukan seberapa cepat kecepatan dalam animasi menurun.

Catatan: Jika gesekan tidak ditetapkan di awal animasi, maka nilai gesekan default, yaitu 1, akan digunakan.

Metode ini menampilkan objek yang animasinya menggunakan nilai gesekan yang Anda berikan.

Contoh kode

Contoh di bawah ini mengilustrasikan fling horizontal. Kecepatan yang ditangkap dari pelacak kecepatan adalah velocityX dan batas scroll ditetapkan ke 0 dan maxScroll. Gesekan ditetapkan ke 1.1.

Kotlin

    FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
        setStartVelocity(-velocityX)
        setMinValue(0f)
        setMaxValue(maxScroll)
        friction = 1.1f
        start()
    }
    

Java

    FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
    fling.setStartVelocity(-velocityX)
            .setMinValue(0)
            .setMaxValue(maxScroll)
            .setFriction(1.1f)
            .start();
    

Menetapkan perubahan minimum yang terlihat

Saat menganimasikan properti kustom yang tidak ditentukan dalam piksel, Anda harus menetapkan perubahan minimal nilai animasi yang terlihat oleh pengguna. Nilai ini menentukan ambang batas wajar untuk mengakhiri animasi.

Metode ini tidak perlu dipanggil ketika menganimasikan DynamicAnimation.ViewProperty karena perubahan minimum yang terlihat diambil dari properti. Misalnya:

  • Nilai default perubahan minimum yang terlihat adalah 1 piksel untuk properti tampilan seperti TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X, dan SCROLL_Y.
  • Untuk animasi yang menggunakan rotasi, seperti ROTATION, ROTATION_X, dan ROTATION_Y, perubahan minimum yang terlihat adalah MIN_VISIBLE_CHANGE_ROTATION_DEGREES, atau 1/10 piksel.
  • Untuk animasi yang menggunakan opasitas, perubahan minimum yang terlihat adalah MIN_VISIBLE_CHANGE_ALPHA, atau 1/256.

Guna menetapkan perubahan minimum yang terlihat untuk sebuah animasi, panggil metode setMinimumVisibleChange() dan teruskan salah satu konstanta minimum yang terlihat, atau nilai yang perlu Anda hitung untuk properti kustom. Untuk informasi selengkapnya tentang cara menghitung nilai ini, lihat bagian Menghitung nilai perubahan minimum yang terlihat.

Kotlin

    anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE
    

Java

    anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);
    

Catatan: Nilai hanya perlu diteruskan jika Anda menganimasikan properti kustom yang tidak ditentukan dalam piksel.

Menghitung nilai perubahan minimum yang terlihat

Guna menghitung nilai perubahan minimum yang terlihat untuk sebuah properti kustom, gunakan formula berikut:

Perubahan minimum yang terlihat = Rentang nilai properti kustom / Rentang animasi dalam piksel

Misalnya, properti yang ingin Anda animasikan meningkat dari 0 hingga 100. Ini sama dengan perubahan 200 piksel. Berdasarkan formula ini, nilai perubahan minimum yang terlihat adalah 100/200, atau setara dengan 0,5 piksel.