Jetpack Compose

Animasi Dasar: animateColorAsState

Penjelasan

Family fungsi animate*AsState() (animateColorAsState, animateDpAsState, animateFloatAsState, dst) adalah cara PALING SEDERHANA membuat animasi implisit di Compose — kamu TIDAK PERLU menulis kode animasi manual, cukup berikan NILAI TARGET, dan Compose otomatis meng-animasikan transisi dari nilai lama ke nilai baru.

Contoh Konsep

@Composable
fun KotakAnimasi() {
    var besar by remember { mutableStateOf(false) }

    val warna by animateColorAsState(
        targetValue = if (besar) Color.Blue else Color.Red,
        label = "warnaKotak"
    )

    Box(
        modifier = Modifier
            .size(if (besar) 200.dp else 100.dp)
            .background(warna)
            .clickable { besar = !besar }
    )
}

Praktikum

Buat Composable dengan state boolean tampak (awalnya true). Pakai animateFloatAsState untuk meng-animasikan alpha dari 1f ke 0.3f (dan sebaliknya) saat Box di-klik lewat Modifier.clickable.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Parameter label (mis. label = "warnaKotak") di fungsi animate*AsState() HANYA dipakai untuk keperluan DEBUGGING lewat Android Studio Layout Inspector — TIDAK berpengaruh apa pun ke perilaku/tampilan animasinya, tapi tetap disarankan diisi supaya lebih mudah dilacak saat debugging performa animasi.

← Kembali Theming: MaterialTheme Lanjutkan → Tugas Akhir