Pengantar animasi

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

Animasi dapat menambahkan isyarat visual yang memberi tahu pengguna tentang apa yang terjadi di aplikasi Anda. Hal ini berguna terutama saat UI berubah status, seperti saat konten baru dimuat atau tindakan baru tersedia. Animasi juga menambahkan tampilan yang bagus ke aplikasi, sehingga memberikan tampilan dan nuansa yang lebih berkualitas.

Android menyertakan berbagai API animasi, bergantung pada jenis animasi yang Anda inginkan. Dokumentasi ini menyediakan ringkasan tentang berbagai cara untuk menambahkan gerakan ke UI Anda.

Untuk lebih memahami kapan Anda harus menggunakan animasi, lihat juga Panduan Desain Material tentang gerakan.

Menganimasikan bitmap

Gambar 1. Drawable animasi.

Untuk menganimasikan grafis bitmap seperti ikon atau ilustrasi, gunakan API animasi drawable. Biasanya, animasi ini ditentukan secara statis dengan resource drawable, tetapi Anda juga dapat menentukan perilaku animasi saat runtime.

Misalnya, cara tepat untuk menyampaikan kepada pengguna bahwa dua tindakan terkait adalah dengan menganimasikan tombol putar yang berubah menjadi tombol jeda saat diketuk.

Untuk informasi selengkapnya, baca Menganimasikan grafik drawable.

Menganimasikan gerakan dan visibilitas UI

Gambar 2. Animasi halus saat dialog muncul dan menghilang membuat perubahan UI tidak terlalu ramai.

Jika Anda perlu mengubah visibilitas atau posisi tampilan di tata letak, sebaiknya sertakan animasi halus untuk membantu pengguna memahami perubahan UI.

Untuk memindahkan, menampilkan, atau menyembunyikan tampilan dalam tata letak saat ini, Anda dapat menggunakan sistem animasi properti yang disediakan oleh paket android.animation, tersedia di Android 3.0 (API level 11) dan yang lebih baru. API ini memperbarui properti objek View Anda selama jangka waktu tertentu, dengan terus menggambar ulang tampilan saat properti berubah. Misalnya, saat Anda mengubah properti posisi, tampilan akan bergerak di sepanjang layar. Saat Anda mengubah properti alfa, tampilan akan memudar masuk atau memudar.

Untuk cara paling sederhana dalam membuat animasi ini, aktifkan animasi pada tata letak sehingga saat Anda mengubah visibilitas tampilan, animasi akan diterapkan secara otomatis. Untuk informasi selengkapnya, lihat Menganimasikan perubahan tata letak secara otomatis.

Untuk mempelajari cara membuat animasi menggunakan sistem animasi properti, baca Ringkasan animasi properti. Anda juga dapat melihat halaman berikut untuk membuat animasi umum:

Gerakan berbasis fisika

Gambar 3. Animasi yang dibuat dengan ObjectAnimator.

Gambar 4. Animasi yang dibuat dengan API berbasis fisika.

Jika memungkinkan, terapkan prinsip fisika dunia nyata ke animasi Anda sehingga terlihat alami. Misalnya, klien harus mempertahankan momentum saat targetnya berubah dan membuat transisi yang lancar selama perubahan apa pun.

Untuk menyediakan perilaku ini, Android Support Library menyertakan API animasi berbasis fisika yang mengandalkan hukum fisika untuk mengontrol cara animasi Anda terjadi.

Dua animasi umum berbasis fisika adalah sebagai berikut:

Animasi yang tidak didasarkan pada fisika—seperti yang dibuat dengan ObjectAnimator API—cukup statis dan memiliki durasi tetap. Jika nilai target berubah, Anda harus membatalkan animasi pada saat nilai target berubah, mengonfigurasi ulang animasi dengan nilai baru sebagai nilai awal yang baru, dan menambahkan nilai target baru. Secara visual, proses ini membuat penghentian tiba-tiba dalam animasi, dan gerakan terputus setelahnya, seperti yang ditunjukkan pada gambar 3.

Animasi yang dibuat oleh API animasi berbasis fisika, seperti DynamicAnimation, digerakkan oleh gaya. Perubahan pada nilai target akan menghasilkan perubahan pada gaya tersebut. Gaya baru akan diterapkan pada kecepatan yang ada, sehingga melakukan transisi berkelanjutan ke target baru. Proses ini menghasilkan animasi yang terlihat lebih alami, seperti yang ditunjukkan pada gambar 4.

Menganimasikan perubahan tata letak

Gambar 5. Animasi untuk menampilkan detail selengkapnya dapat dilakukan dengan mengubah tata letak atau memulai aktivitas baru.

Di Android 4.4 (level API 19) dan yang lebih tinggi, Anda dapat menggunakan framework transisi untuk membuat animasi saat menukar tata letak dalam aktivitas atau fragmen saat ini. Anda hanya perlu menentukan tata letak awal dan akhir, serta jenis animasi yang ingin digunakan. Kemudian, sistem mencari tahu dan menjalankan animasi antara kedua tata letak tersebut. Anda dapat menggunakannya untuk menukar seluruh UI, memindahkan atau mengganti beberapa tampilan saja.

Misalnya, saat pengguna mengetuk item untuk melihat informasi selengkapnya, Anda dapat mengganti tata letak dengan detail item, dengan menerapkan transisi seperti yang ditunjukkan dalam gambar 5.

Tata letak awal dan akhir masing-masing disimpan dalam Scene, meskipun scene awal biasanya ditentukan secara otomatis dari tata letak saat ini. Anda membuat Transition untuk memberi tahu sistem jenis animasi yang Anda inginkan, lalu memanggil TransitionManager.go(), dan sistem akan menjalankan animasi tersebut untuk menukar tata letak.

Untuk informasi selengkapnya, baca Menganimasikan perubahan tata letak menggunakan transisi. Untuk kode contoh, lihat BasicTransition.

Menganimasikan antara aktivitas

Di Android 5.0 (API level 21) dan yang lebih tinggi, Anda juga dapat membuat animasi yang beralih di antara aktivitas. Fitur ini didasarkan pada framework transisi yang sama seperti yang dijelaskan di bagian sebelumnya, tetapi memungkinkan Anda membuat animasi antar-tata letak dalam aktivitas terpisah.

Anda dapat menerapkan animasi sederhana seperti menggeser aktivitas baru dari sisi atau memudarnya, tetapi Anda juga dapat membuat animasi yang bertransisi di antara tampilan bersama dalam setiap aktivitas. Misalnya, saat pengguna mengetuk item untuk melihat informasi selengkapnya, Anda dapat bertransisi ke aktivitas baru dengan animasi yang memperluas item tersebut dengan mulus untuk mengisi layar, seperti animasi yang ditunjukkan dalam gambar 5.

Seperti biasa, Anda akan memanggil startActivity(), tetapi meneruskan paket opsi yang disediakan oleh ActivityOptions.makeSceneTransitionAnimation(). Paket opsi ini dapat mencakup tampilan yang dibagikan antar-aktivitas sehingga framework transisi dapat menghubungkannya selama animasi.

Untuk referensi tambahan, lihat: