Android Academy · Pelajaran

AnimatedVisibility dan Transisi

Animasi untuk menampilkan dan menyembunyikan konten.

AnimatedVisibility dan Transisi adalah pelajaran Android 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Menganimasikan Kemunculan

Menampilkan dan menyembunyikan konten secara tiba-tiba terasa mengganggu. AnimatedVisibility dari Compose menganimasikan composable saat memasuki dan meninggalkan tata letak.

Bungkus konten Anda di dalamnya dan kendalikan visibilitas dengan boolean. Saat boolean tersebut berubah, Compose menjalankan animasi masuk atau keluar, bukan perubahan yang muncul seketika.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Transisi Masuk dan Keluar

Anda dapat memilih secara tepat cara konten masuk dan keluar dengan parameter enter dan exit. Komponen penyusun yang umum mencakup fadeIn/fadeOut, slideIn/slideOut, dan expandVertically/shrinkVertically.

Gabungkan semuanya dengan operator + agar beberapa animasi berjalan sekaligus.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Menyesuaikan Spesifikasi Transisi

Setiap transisi masuk/keluar menerima animationSpec, sehingga Anda dapat mengatur durasi dan easing seperti pada animate*AsState.

Di sini, konten memudar masuk selama 300ms dan memudar keluar lebih cepat, selama 150ms. Ini pola umum yang membuat penutupan terasa cepat.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Membuka dan Menyusutkan

Untuk bagian yang menampilkan lebih banyak konten, expandVertically dan shrinkVertically menganimasikan tinggi sehingga konten di sekitarnya terdorong dengan mulus.

Ini sangat cocok untuk panel yang dapat diciutkan, item FAQ, atau bagian "tampilkan lebih banyak".

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: Satu Status, Banyak Nilai

Saat beberapa properti harus berubah bersama berdasarkan satu status, updateTransition mengoordinasikannya. API ini membuat objek Transition yang semua turunannya menganimasi secara sinkron.

Tentukan statusnya, lalu gunakan animateColor, animateDp, dan sebagainya untuk setiap properti sebagai fungsi dari status tersebut.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Pengaturan Waktu per Properti dalam Transisi

Keunggulan utama updateTransition adalah pengaturan waktu per properti. Setiap turunan animate* dapat memberikan transitionSpec sendiri, sehingga warna dan ukuran dapat bergerak dengan kecepatan berbeda sambil tetap dikoordinasikan oleh status yang sama.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: Menukar Konten

Saat konten itu sendiri berubah, bukan hanya visibilitasnya, gunakan AnimatedContent. API ini menganimasikan perpindahan antara konten lama dan baru, dengan cross-fade secara bawaan.

API ini ideal untuk hal-hal seperti penghitung, indikator langkah, atau perpindahan antara status memuat dan selesai dimuat.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Transisi AnimatedContent Kustom

Sesuaikan cara AnimatedContent menukar konten dengan transitionSpec. Pola klasik untuk penghitung adalah menggeser nilai baru ke atas saat nilai lama bergeser pergi, disertai fade.

Kata kunci using memasang SizeTransform sehingga ukuran wadah juga berubah dengan mulus.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Menganimasikan Item Daftar

Di dalam LazyColumn, item yang ditambahkan, dihapus, atau dipindahkan dapat menganimasi perpindahannya dengan Modifier.animateItem() pada konten setiap item.

Ini menghasilkan pengurutan ulang dan penyisipan yang mulus tanpa pencatatan manual.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Crossfade untuk Seluruh Layar

Crossfade adalah pembantu sederhana dan terfokus yang melakukan fade antara dua status, cocok untuk berpindah antar-layar secara keseluruhan atau antar-status UI utama.

Berikan status saat ini dan lambda konten; saat status berubah, Crossfade memudarkan yang lama lalu memunculkan yang baru.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Mengoordinasikan Turunan yang Masuk

Di dalam blok AnimatedVisibility, Anda mendapatkan AnimatedVisibilityScope, yang menyediakan Modifier.animateEnterExit(). Dengan ini, setiap turunan dapat menjalankan animasi masuk/keluar sendiri di atas transisi induknya.

Misalnya, panel dapat meluncur masuk sementara judulnya memudar sedikit lebih lambat untuk menghasilkan efek berlapis.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Pemeriksaan Singkat

Anda ingin menganimasikan perpindahan dari angka 3 ke angka 4, dengan nilai baru memudar dan meluncur masuk. API mana yang paling sesuai?

Rangkuman: Visibilitas & Transisi

Sekarang Anda dapat menganimasikan kemunculan, penghilangan, dan perubahan konten:

AnimatedVisibility menganimasikan masuk/keluar dengan fadeIn/Out, slideIn/Out, expand/shrink, yang dapat digabungkan dengan +.
updateTransition mengoordinasikan banyak nilai dari satu status, masing-masing dengan spesifikasinya sendiri.
AnimatedContent menganimasikan pertukaran antara konten yang berbeda; Crossfade adalah varian fade yang sederhana.
Modifier.animateItem() menganimasikan penyisipan dan pengurutan ulang item daftar.

Berikutnya: gestur dan animasi pegas berbasis fisika untuk menghasilkan gerakan alami dan interaktif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “AnimatedVisibility dan Transisi” gratis?

Ya — teks lengkap “AnimatedVisibility dan Transisi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “AnimatedVisibility dan Transisi”?

Animasi untuk menampilkan dan menyembunyikan konten. Kamu berlatih Android 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 Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android 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 “AnimatedVisibility dan Transisi” 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 Android Academy ini?

Ya. Setiap pelajaran Android 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

← Kembali ke Android Academy