updateTransition untuk Gerakan Terkoordinasi
Animasikan beberapa nilai dari satu state.
updateTransition untuk Gerakan Terkoordinasi adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Animasikan Banyak Nilai Bersamaan
Saat beberapa properti harus berubah ketika satu state berubah, Anda tentu ingin semuanya tetap selaras. updateTransition mengoordinasikan banyak animasi dari satu state. ✨
Mulai dari State
Buat transisi dengan memberikan state saat ini kepada updateTransition. Compose mengawasinya dan menggerakkan setiap animasi turunan saat state berubah.
val transition = updateTransition(targetState = expanded)Turunkan Nilai yang Dianimasikan
Minta setiap nilai dari transisi menggunakan animateDp, animateColor, dan fungsi sejenis. Anda memberikan lambda yang memetakan setiap state ke targetnya.
val size by transition.animateDp { if (it) 200.dp else 80.dp }Banyak Nilai, Satu Sumber
Tambahkan sebanyak mungkin animasi turunan dari transisi yang sama. Ukuran, warna, dan radius sudut semuanya berubah bersama dari satu boolean.
val corner by transition.animateDp { if (it) 0.dp else 24.dp }Terkoordinasi Sempurna
Karena berbagi satu transisi, nilai-nilai tersebut tetap selaras sepenuhnya. Tidak ada risiko ukuran selesai sebelum warna, yang dapat terjadi jika menggunakan beberapa panggilan animateAsState terpisah.
Gunakan Nilai dalam Modifier
Baca setiap nilai yang dianimasikan seperti status biasa, lalu terapkan nilainya. Seluruh elemen berubah bentuk dengan mulus seiring transisi berjalan pada setiap bingkai.
Box(Modifier.size(size).clip(RoundedCornerShape(corner)))Pengaturan Waktu per Nilai
Setiap turunan dapat memiliki transitionSpec sendiri. Buat warna berubah cepat sementara ukuran berubah perlahan, semuanya tetap dipicu oleh perubahan status yang sama.
transition.animateDp(transitionSpec = { tween(600) }) { ... }Lebih dari Dua Status
Status Anda dapat berupa enumerasi, bukan hanya boolean. Petakan setiap kasus ke target, lalu transisi akan menganimasikan perpindahan di antara semuanya.
enum class BoxState { Collapsed, Half, Expanded }Periksa Status Saat Ini dan Target
Transisi menyediakan currentState dan status target. Anda dapat memeriksa apakah gerakan masih berlangsung atau sudah berhenti pada tujuan.
Kapan Menggunakannya
Pilih updateTransition ketika satu peristiwa harus menggerakkan serangkaian perubahan yang terkoordinasi, seperti memperluas kartu sambil mengubah warna dan elevasinya secara bersamaan. 🎬
Lebih Ringkas daripada Banyak Pemanggilan
Mengelompokkan animasi dalam satu transisi lebih rapi dan lebih mudah dipahami daripada mengatur beberapa nilai animasi berbasis status secara terpisah.
Pemeriksaan Singkat
Apa manfaat utama updateTransition dibandingkan beberapa pemanggilan animasi berbasis status yang terpisah?
Rangkuman: Satu Status, Banyak Gerakan
Anda telah mempelajari updateTransition: memperoleh beberapa nilai yang dianimasikan dari satu status agar semuanya bergerak benar-benar serempak, masing-masing dengan pengaturan waktunya sendiri. 🎉
Pertanyaan yang Sering Diajukan
Apakah pelajaran “updateTransition untuk Gerakan Terkoordinasi” gratis?
Ya — teks lengkap “updateTransition untuk Gerakan Terkoordinasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “updateTransition untuk Gerakan Terkoordinasi”?
Animasikan beberapa nilai dari satu state. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?
Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “updateTransition untuk Gerakan Terkoordinasi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- animate*AsState untuk Tween Sederhana
- AnimatedVisibility & Crossfade
- updateTransition untuk Gerakan Terkoordinasi
- Animasi yang Digerakkan Gestur