Menggerakkan tampilan menggunakan animasi fling

Mencoba cara Compose

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

AnimationSpec Pegas →

Animasi berbasis ayun menggunakan gaya gesek yang sebanding dengan kecepatan objek. Gunakan untuk menganimasikan properti objek dan mengakhiri animasi secara bertahap. Fling memiliki momentum awal, yang sebagian besar diterima dari kecepatan gestur, dan melambat secara bertahap. Animasi akan berakhir saat kecepatan animasi cukup rendah sehingga tidak membuat perubahan yang terlihat pada layar perangkat.

Untuk mempelajari topik terkait, baca panduan berikut:

• Gerakan berbasis fisika
• Menganimasikan gerakan menggunakan fisika pegas

Menambahkan library AndroidX

Untuk menggunakan animasi berbasis fisika, Anda harus menambahkan library AndroidX ke project sebagai berikut:

1. Buka file build.gradle untuk modul aplikasi Anda.
2. Tambahkan library AndroidX ke bagian dependencies.

   Groovy

           dependencies {
               implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
           }
           

   Kotlin

           dependencies {
               implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
           }
           

Membuat animasi fling

Class FlingAnimation memungkinkan Anda membuat animasi ayun cepat untuk objek. Untuk membuat animasi ayun cepat, buat instance class FlingAnimation dan berikan objek serta properti objek yang ingin Anda animasikan.

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

Mengatur kecepatan

Kecepatan awal menentukan kecepatan perubahan properti animasi pada 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 Anda dapat mendasarkannya pada kecepatan gestur sentuh. Jika Anda memilih untuk memberikan nilai tetap, Anda harus menentukan nilai dalam dp per detik, lalu mengonversinya menjadi piksel per detik. Menentukan nilai dalam dp per detik memungkinkan kecepatan menjadi independen terhadap kepadatan 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 di Animasi Spring.

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

Catatan: Gunakan class GestureDetector.OnGestureListener dan VelocityTracker untuk mengambil dan menghitung kecepatan gestur sentuh.

Menetapkan rentang nilai animasi

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

Catatan: Saat nilai animasi ayun mencapai nilai minimum atau maksimum, animasi akan berakhir.

Untuk menetapkan nilai minimum dan maksimum, panggil 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 Anda tidak menetapkan gesekan di awal animasi, animasi akan menggunakan nilai gesekan default 1.

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

Kode contoh

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

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

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 nilai minimum yang wajar untuk mengakhiri animasi.

Anda tidak perlu memanggil metode ini saat menganimasikan DynamicAnimation.ViewProperty karena perubahan minimum yang terlihat berasal dari properti. Contoh:

• Nilai perubahan minimum yang terlihat secara default 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.

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

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Catatan: Anda hanya perlu meneruskan nilai saat menganimasikan properti kustom yang tidak ditentukan dalam piksel.

Menghitung nilai perubahan minimum yang terlihat

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

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

Misalnya, properti yang ingin Anda animasikan berlangsung dari 0 hingga 100. Ini sama dengan perubahan 200 piksel. Sesuai formula, nilai perubahan minimum yang terlihat adalah 100 / 200, yang sama dengan 0,5 piksel.