Halo. Saya zm soft, yang mendaftar sebagai developer tahun lalu (akhir 2023) dan mulai merilis aplikasi. Kami juga berencana merilis aplikasi untuk developer, jadi silakan cek jika tertarik.
Apakah kalian menggunakan tampilan animasi di dalam aplikasi? Hanya dengan sedikit animasi, aplikasi bisa menjadi lebih mudah dipahami dan terlihat lebih menarik, bukan? Oleh karena itu, hari ini saya ingin menulis tentang cara menampilkan animasi di aplikasi Android.
LottieAnimation
Library yang saya gunakan adalah LottieAnimation, sebuah library untuk menampilkan animasi. Saya menggunakannya karena memungkinkan tampilan animasi ringan secara relatif mudah.
Jenis animasi yang bisa ditampilkan
Pertama, salah satu keunggulan library ini adalah banyaknya animasi yang bisa digunakan secara gratis. Misalnya, tersedia animasi seperti ini.
Animasi-animasi ini dipublikasikan di situs resmi LottieFiles. Ada juga banyak animasi berbayar, tetapi hanya dengan memfilter yang gratis saja sudah lebih dari cukup untuk digunakan. Pada dasarnya, karena saya tidak memiliki kemampuan maupun energi untuk membuat animasi dari nol, ketika saya ingin menambahkan gerakan, saya pertama-tama memikirkan apakah ada yang bisa digunakan dari situs ini. Misalnya, dengan menggunakan animasi seperti ini, Anda dapat memberitahu pengguna tentang titik klik yang umum saat pertama kali ditampilkan. Saya benar-benar menggunakan animasi di sebelah kanan untuk memberikan panduan operasi kepada pengguna.
Poin utama: kemudahan
Implementasinya juga bisa ditangani dengan cukup sederhana. Misalnya, jika hanya ingin menampilkan animasi di layout tertentu, cukup mendefinisikannya dengan cara berikut dan sudah berjalan. Tidakkah itu menyenangkan kalau bisa berjalan tanpa harus mengimplementasikan logika apa pun?
Metode implementasi sederhana Lottie
Implementasi Lottie sangat sederhana. Cukup menyematkan animasi di layout tertentu, dan itu akan berjalan tanpa logika tambahan.
Contoh implementasi:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Cara dasar penggunaan Lottie
Langkah-langkah utama penggunaan Lottie adalah sebagai berikut:
- Integrasi library (modifikasi build.gradle)
- Mendapatkan dan menempatkan file animasi
- Pengaturan file layout
- Kustomisasi animasi
Contoh implementasi konkret dan kode
Berikut adalah contoh implementasi konkret saat menggunakan Lottie. Ini mencakup cara mengintegrasikan library, cara menempatkan file animasi, cara mengatur file layout, serta cara mengkustomisasi animasi.
Penulisan di build.gradle / Integrasi library:
Pertama, integrasikan library agar bisa menggunakan Lottie.
Jika tidak ada masalah kompatibilitas, silakan gunakan versi terbaru.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Penempatan file animasi:
Unduh file animasi favorit (.json) dari situs resmi LottieFiles dan tempatkan di folder res/raw aplikasi.
Pengaturan file layout:
Tambahkan LottieAnimationView ke layout XML agar dapat merujuk ke file animasi yang diunduh.
Kustomisasi animasi:
Sesuaikan perilaku animasi sesuai kebutuhan. Dalam pengaturan animasi, Anda dapat melakukan hal-hal berikut:
- Ada atau tidaknya pemutaran loop
- Penentuan jumlah pengulangan
- Penentuan kecepatan pemutaran (termasuk pemutaran mundur)
Dengan menambahkan pemrosesan dinamis, Anda dapat memutar/menghentikan kapan saja, dan mengubah kecepatan pemutaran.
Pertama, tentang cara penentuan statis. Perilaku animasi berubah sesuai penentuan berikut.
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Dalam contoh ini, file your_lottie_animation.json diputar secara otomatis dengan kecepatan pemutaran 0.15x dan diulang.
Selanjutnya, pemrosesan dinamis:
lottieAnimationView.playAnimation()
Dengan pemrosesan di atas, animasi bisa diputar. Selain pemutaran, Anda juga bisa mengubah pengaturan untuk menghentikan, mengubah kecepatan, dll. Anda juga bisa mengatur listener seperti berikut untuk mendeteksi akhir pemutaran dan memprosesnya:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Hal-hal yang perlu diperhatikan dan pemecahan masalah
Lottie sangat berguna, tetapi ada beberapa hal yang perlu diperhatikan. Khususnya, perubahan posisi objek terkadang tidak berfungsi seperti yang diharapkan. Saya juga akan menjelaskan masalah stack overflow yang berkaitan dengan pemrosesan saat animasi berakhir, dan perilaku setelah onPause.
Contoh pemecahan masalah 1:
Ini adalah masalah dalam implementasi saya: cara menangani pemrosesan saat animasi berakhir menyebabkan stack overflow. Secara konkret, ada masalah dalam pemrosesan yang memutar mundur saat mencapai akhir animasi dan mengulangi pemutaran dan pemutaran mundur. Masalah diselesaikan dengan mem-posting ke main thread dan menempatkan kembali ke antrian:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Contoh pemecahan masalah 2:
Hal lain yang perlu diperhatikan adalah pemrosesan setelah onPause. Untuk menghindari operasi yang tidak perlu, animasi di background sebaiknya dihentikan.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Namun, jika ada pemrosesan saat animasi berakhir dll., ini saja tidak cukup. Oleh karena itu, diperlukan pemeriksaan apakah parent view belum di-detach dan pemrosesan ulang:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Kesimpulan
Lottie adalah alat yang kuat untuk meningkatkan UI aplikasi. Banyak animasi yang bisa digunakan secara gratis dan implementasinya sederhana. Dengan memahami hal-hal yang perlu diperhatikan dan menanganinya dengan tepat, Anda bisa mendapatkan manfaat besar dalam pengembangan aplikasi. Meskipun ada beberapa catatan, secara keseluruhan sangat mudah digunakan dan banyak sumber daya yang bisa digunakan secara gratis, sehingga menurut saya ini adalah library yang luar biasa. Saya yakin ini akan membantu meningkatkan tampilan aplikasi, jadi silakan coba.