updateTransition untuk Gerakan Terkoordinasi
Animasikan beberapa nilai daripada satu state.
updateTransition untuk Gerakan Terkoordinasi ialah pelajaran Jetpack Compose Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Jetpack Compose Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.
Animasikan Banyak Nilai Bersama
Apabila beberapa sifat perlu berubah serentak apabila satu keadaan berubah, anda mahu semuanya seiring. updateTransition menyelaraskan banyak animasi daripada satu keadaan. ✨
Bermula daripada Keadaan
Cipta peralihan dengan menyerahkan keadaan semasa anda kepada updateTransition. Compose memerhatikannya dan menggerakkan setiap animasi anak apabila keadaan berubah.
val transition = updateTransition(targetState = expanded)Terbitkan Nilai Beranimasi
Minta setiap nilai daripada peralihan menggunakan animateDp, animateColor dan fungsi lain. Anda memberikan lambda yang memetakan setiap keadaan kepada sasarannya.
val size by transition.animateDp { if (it) 200.dp else 80.dp }Banyak Nilai, Satu Sumber
Tambahkan seberapa banyak animasi anak yang anda mahu daripada peralihan yang sama. Saiz, warna dan jejari bucu semuanya berubah bersama berdasarkan satu boolean.
val corner by transition.animateDp { if (it) 0.dp else 24.dp }Diselaraskan Sepenuhnya
Oleh sebab semuanya berkongsi satu peralihan, nilai-nilai tersebut kekal seiring. Tiada risiko saiz selesai sebelum warna, seperti yang boleh berlaku dengan panggilan animateAsState yang berasingan.
Gunakan Nilai dalam Modifier
Baca setiap nilai beranimasi seperti keadaan biasa dan gunakannya. Keseluruhan elemen berubah bentuk dengan lancar apabila peralihan berjalan pada setiap bingkai.
Box(Modifier.size(size).clip(RoundedCornerShape(corner)))Pemasaan Setiap Nilai
Setiap anak boleh mempunyai transitionSpec sendiri. Jadikan warna berubah dengan pantas sementara saiz dilonggarkan secara perlahan, semuanya masih dicetuskan oleh perubahan keadaan yang sama.
transition.animateDp(transitionSpec = { tween(600) }) { ... }Lebih daripada Dua Keadaan
Keadaan anda boleh berupa enum, bukan sekadar boolean. Petakan setiap kes kepada sasaran dan peralihan akan menganimasikan antara mana-mana kes tersebut.
enum class BoxState { Collapsed, Half, Expanded }Periksa Semasa dan Sasaran
Peralihan mendedahkan currentState dan keadaan sasaran. Anda boleh menyemak sama ada pergerakan masih berlangsung atau sudah mencapai matlamat.
Bila Perlu Menggunakannya
Pilih updateTransition apabila satu peristiwa perlu menggerakkan sekumpulan perubahan yang diselaraskan, seperti mengembangkan kad sambil warna dan ketinggiannya berubah serentak. 🎬
Lebih Ringkas daripada Banyak Panggilan
Mengumpulkan animasi di bawah satu peralihan lebih kemas dan lebih mudah difahami berbanding mengurus beberapa nilai animate*AsState yang berasingan.
Semakan Pantas
Apakah manfaat utama updateTransition berbanding panggilan animate*AsState yang berasingan?
Imbas Kembali: Satu Keadaan, Banyak Pergerakan
Anda telah mempelajari updateTransition: terbitkan beberapa nilai beranimasi daripada satu keadaan supaya semuanya bergerak serentak dengan sempurna, setiap satunya mengikut pemasaan tersendiri. 🎉
Pelajari Kotlin dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “updateTransition untuk Gerakan Terkoordinasi” percuma?
Ya — teks penuh “updateTransition untuk Gerakan Terkoordinasi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Jetpack Compose Academy, tingkat taraf kepada CoddyKit PRO. Kursus Jetpack Compose Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “updateTransition untuk Gerakan Terkoordinasi”?
Animasikan beberapa nilai daripada satu state. Anda berlatih Jetpack Compose Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Jetpack Compose Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Jetpack Compose Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “updateTransition untuk Gerakan Terkoordinasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Jetpack Compose Academy ini?
Ya. Setiap pelajaran Jetpack Compose Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- animate*AsState untuk Tween Ringkas
- AnimatedVisibility & Crossfade
- updateTransition untuk Gerakan Terkoordinasi
- Animasi Dipacu Gerak Isyarat