AnimatedVisibility & Crossfade
Animasikan kemunculan dan pergantian konten.
AnimatedVisibility & Crossfade adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Kemunculan
Terkadang Anda ingin konten masuk dengan bergeser atau memudar, bukan langsung muncul. AnimatedVisibility menganimasikan Composable saat masuk dan keluar dari layar. ✨
Bungkus yang Ingin Ditampilkan
Berikan AnimatedVisibility sebuah boolean dan lambda konten. Saat boolean berubah, fungsi ini menganimasikan konten tersebut masuk atau keluar untuk Anda.
AnimatedVisibility(visible = show) {
Text("Hello!")
}Masuk dan Keluar Bawaan
Secara bawaan, fungsi ini menggunakan pemudaran lembut yang dipadukan dengan perluasan dan penyusutan. Elemen muncul dan menghilang dengan halus tanpa konfigurasi tambahan.
Sesuaikan Kemunculan
Atur parameter enter untuk memilih cara konten muncul. Gabungkan transisi seperti fadeIn dan slideInVertically dengan operator tambah.
enter = fadeIn() + slideInVertically()Sesuaikan Penghilangan
Parameter exit mengatur cara konten keluar. Anda dapat mencerminkan kemunculan atau memilih efek berbeda seperti shrinkOut agar lebih bervariasi.
exit = fadeOut() + shrinkVertically()Geser, Perluas, Skala
Compose menyediakan banyak transisi: slideIn, expandHorizontally, scaleIn, dan pasangan keluarnya. Campurkan semuanya untuk merancang gerakan sesuai keinginan.
Mengganti Konten dengan Halus
Untuk mengganti satu Composable dengan Composable lain, gunakan Crossfade. Fungsi ini memudarkan konten lama saat konten baru mulai muncul. 🔀
Crossfade Berdasarkan Kunci
Berikan Crossfade sebuah targetState. Setiap kali nilai tersebut berubah, fungsi ini menganimasikan peralihan antara konten yang dihasilkan untuk state lama dan baru.
Crossfade(targetState = screen) { current ->
ScreenFor(current)
}Cocok untuk Tab dan Layar
Crossfade sangat berguna saat berpindah antara tampilan yang berbeda, seperti state memuat dan selesai dimuat atau dua tab, sehingga peralihannya terasa rapi, bukan mengejutkan.
Atur Waktu Crossfade
Berikan animationSpec kepada Crossfade untuk memperlambat atau mempercepat percampuran. Tween yang lebih panjang membuat transisi terasa lebih lembut dan disengaja.
Crossfade(state, animationSpec = tween(700)) { ... }Pilih Alat yang Tepat
Gunakan AnimatedVisibility untuk menampilkan atau menyembunyikan satu hal, dan Crossfade untuk mengganti di antara beberapa pilihan. Masing-masing menyelesaikan masalah tampilan yang berbeda.
Pemeriksaan Singkat
Composable mana yang mengganti satu bagian konten dengan bagian lainnya secara halus?
Rangkuman: Masuk, Keluar, Ganti
Sekarang Anda dapat menganimasikan kemunculan dengan AnimatedVisibility dan memadukan tampilan dengan Crossfade, sambil menyesuaikan kemunculan, penghilangan, dan waktunya. 🎉
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “AnimatedVisibility & Crossfade” gratis?
Ya — teks lengkap “AnimatedVisibility & Crossfade” 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 “AnimatedVisibility & Crossfade”?
Animasikan kemunculan dan pergantian konten. 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 2 dari 4.
Berapa lama pelajaran “AnimatedVisibility & Crossfade” 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