Menggerakkan tampilan menggunakan animasi fling

Mencoba cara Compose

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

Spring AnimationSpec →

Animasi berbasis ayunkan jari menggunakan gaya gesek yang proporsional dengan kecepatan objek. Gunakan untuk menganimasikan properti suatu objek dan untuk mengakhiri animasi secara bertahap. Model ini memiliki momentum awal, yaitu sebagian besar diterima dari kecepatan {i>gesture<i}, dan secara bertahap melambat. Tujuan animasi berakhir ketika kecepatan animasi cukup rendah bahwa hal itu tidak membuat perubahan yang terlihat di layar perangkat.

Untuk mempelajari topik terkait, baca panduan berikut:

• Berbasis fisika gerakan
• 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 fling untuk suatu objek. Untuk membuat animasi fling, buat sebuah dari class FlingAnimation dan sediakan objek dan 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 properti animasi perubahan di awal animasi. Kecepatan awal default adalah setel 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 dari kecepatan gestur sentuh. Jika Anda memilih untuk memberikan nilai tetap, Anda harus menentukan nilai dalam dp per detik, lalu mengonversinya menjadi piksel dan Operasi input/output per detik dengan jumlah tinggi. Dengan menentukan nilai dalam dp per detik, kecepatan akan tidak bergantung pada kepadatan dan faktor bentuk perangkat. Untuk mengetahui informasi selengkapnya tentang mengonversi kecepatan awal menjadi {i>pixel<i} per detik, lihat Mengonversi dp per detik menjadi piksel per detik di Animasi Pegas.

Untuk menetapkan kecepatan, panggil metode setStartVelocity() dan teruskan kecepatan dalam {i>pixel<i} per detik. Metode ini akan mengembalikan objek fling pada yang kecepatannya ditetapkan.

Catatan: Gunakan GestureDetector.OnGestureListener dan Class VelocityTracker untuk diambil dan dihitung kecepatan dari {i>gesture <i}sentuh.

Menetapkan rentang nilai animasi

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

Catatan: Ketika nilai animasi fling mencapai atau nilai minimum atau maksimum, animasi akan berakhir.

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

Menetapkan gesekan

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

Catatan: Jika Anda tidak menetapkan gesekan di awal animasi, maka animasi menggunakan nilai gesekan {i>default<i} 1.

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

Kode contoh

Contoh di bawah ini mengilustrasikan fling horizontal. Kecepatan yang ditangkap dari pelacak kecepatan adalah velocityX dan batas scrollnya adalah tetapkan 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 khusus yang tidak didefinisikan dalam piksel, Anda harus menyetel perubahan minimal pada nilai animasi yang terlihat oleh pengguna. Ini menentukan nilai minimum yang wajar untuk mengakhiri animasi.

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

• Nilai perubahan minimum default yang terlihat adalah 1 piksel untuk tampilan properti seperti TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X, dan SCROLL_Y.
• Untuk animasi yang menggunakan rotasi, seperti ROTATION, ROTATION_X, dan ROTATION_Y, ukuran minimum yang terlihat perubahannya 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 menyetel perubahan minimum yang terlihat bagi 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 Menghitung nilai perubahan minimum yang terlihat bagian.

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Catatan: Anda hanya perlu meneruskan nilai saat menganimasikan properti khusus yang tidak didefinisikan 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 khusus / Rentang animasi dalam piksel

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