TUGAS 4 - YUSUF HASAN NAZILA

Modifikasi Aplikasi Sederhana dengan Menerapkan Button Component

Nama	NRP
Yusuf Hasan Nazila	5025211225

Dice Roller adalah aplikasi sederhana untuk melempar dadu secara digital. Awalnya, Dice Roller hanya mengganti gambar dadu setiap kali tombol Roll ditekan.

Untuk membuat aplikasi lebih menarik, kita akan memodifikasi proyek ini: dari hanya mengganti gambar menjadi ada animasi dadu yang melayang, berputar, dan jatuh.

Tahapan Pembuatan Dice Roller

1. Membuat Dice Roller Sederhana

Pada tahap awal, aplikasi Dice Roller hanya:

• Menampilkan gambar dadu menggunakan komponen Image.
• Menyediakan tombol menggunakan komponen Button untuk Roll.
• Saat tombol ditekan, gambar dadu langsung berubah secara instan.

Kode Dasar:

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }

    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            result = (1..6).random()
        }) {
            Text(text = "Roll")
        }
    }
}

Kelebihan: Sederhana dan cepat.
Kekurangan: Kurang menarik secara visual karena gambar hanya langsung berganti.

2. Menambahkan Animasi pada Dice Roller

Agar lebih hidup, kita menambahkan animasi:

• Dadu melayang ke atas.
• Berputar di udara.
• Jatuh kembali ke bawah.

Untuk itu, digunakan komponen:

• Animatable untuk mengatur perubahan nilai secara halus.
• offsetY untuk gerakan naik-turun.
• rotation untuk gerakan berputar.
• coroutineScope untuk menjalankan animasi secara berurutan.

Kode Modifikasi:

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf(1) }
    val coroutineScope = rememberCoroutineScope()

    val offsetY = remember { Animatable(0f) }
    val rotation = remember { Animatable(0f) }

    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString(),
            modifier = Modifier
                .offset { IntOffset(0, offsetY.value.toInt()) }
                .graphicsLayer(rotationZ = rotation.value)
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = {
            coroutineScope.launch {
                offsetY.animateTo(targetValue = -200f, animationSpec = tween(durationMillis = 400))
                rotation.animateTo(targetValue = 1080f, animationSpec = tween(durationMillis = 1000))
                delay(100)
                offsetY.animateTo(targetValue = 0f, animationSpec = tween(durationMillis = 600))
                result = (1..6).random()
                rotation.snapTo(0f)
            }
        }) {
            Text(text = "Roll")
        }
    }
}

Perbedaan Sebelum dan Sesudah Modifikasi

Sebelum Animasi	Sesudah Animasi
Gambar langsung berubah	Dadu melayang, berputar, lalu jatuh
Tidak ada pergerakan visual	Memberikan efek realistis saat roll
Kurang menarik	Lebih interaktif dan menyenangkan

Video Demo

Repository GitHub

Kode Github