Tugas 8: Membuat Animasi Botol Air

May 20, 2025

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 8: Membuat Animasi Botol Air

Di artikel ini, saya membuat aplikasi sederhana berupa animasi botol minuman yang interaktif menggunakan Jetpack Compose pada Android Studio. Fokus utama dari aplikasi ini adalah memberikan pengalaman visual yang menarik dengan animasi yang halus, sambil tetap mempertahankan struktur kode yang jelas dan rapi.

Pada aplikasi ini, pengguna bisa menekan tombol "Drink" untuk mengisi air ke dalam botol secara bertahap. Animasi ketinggian air di dalam botol ditampilkan dengan transisi yang mulus, memberikan pengalaman pengguna yang lebih menyenangkan. Ketika botol sudah penuh, tombol "Drink" akan otomatis dinonaktifkan, dan muncul notifikasi yang memberi tahu pengguna bahwa botol sudah mencapai batas maksimal. Selain itu, terdapat tombol "Reset" yang memungkinkan pengguna mengosongkan kembali botol ke kondisi awal.

WaterBottle()

fun WatterBottle(
    modifier: Modifier = Modifier,
    totalWaterAmount: Int,
    unit: String,
    usedWaterAmount: Int,
    waterWavesColor: Color = Color(0xff279EFF),
    bottleColor: Color = Color.White,
    capColor: Color = Color(0xFF0065B9)
) {

    val safeUsed = usedWaterAmount.coerceAtMost(totalWaterAmount)

    val waterPercentage = animateFloatAsState(
        targetValue = safeUsed.toFloat() / totalWaterAmount.toFloat(),
        label = "Water Waves animation",
        animationSpec = tween(durationMillis = 500)
    ).value

    val usedWaterAmountAnimation = animateIntAsState(
        targetValue = safeUsed,
        label = "Used water amount animation",
        animationSpec = tween(durationMillis = 500)
    ).value

    Box(
        modifier = modifier
            .width(200.dp)
            .height(600.dp)
    ) {

        Canvas(modifier = Modifier.fillMaxSize()) {
            val width = size.width
            val height = size.height

            val capWidth = size.width * 0.55f
            val capHeight = size.height * 0.13f

            //Draw the bottle body
            val bodyPath = Path().apply {
                moveTo(width * 0.3f, height * 0.1f)
                lineTo(width * 0.3f, height * 0.2f)
                quadraticBezierTo(
                    0f, height * 0.3f, // The pulling point
                    0f, height * 0.4f
                )
                lineTo(0f, height * 0.95f)
                quadraticBezierTo(
                    0f, height,
                    width * 0.05f, height
                )

                lineTo(width * 0.95f, height)
                quadraticBezierTo(
                    width, height,
                    width, height * 0.95f
                )
                lineTo(width, height * 0.4f)
                quadraticBezierTo(
                    width, height * 0.3f,
                    width * 0.7f, height * 0.2f
                )
                lineTo(width * 0.7f, height * 0.2f)
                lineTo(width * 0.7f, height * 0.1f)

                close()
            }
            clipPath(
                path = bodyPath
            ) {
                // Draw the color of the bottle
                drawRect(
                    color = bottleColor,
                    size = size,
                    topLeft = Offset(0f, 0f)
                )

                //Draw the water waves
                val waterWavesYPosition = (1 - waterPercentage) * size.height

                val wavesPath = Path().apply {
                    moveTo(
                        x = 0f,
                        y = waterWavesYPosition
                    )
                    lineTo(
                        x = size.width,
                        y = waterWavesYPosition
                    )
                    lineTo(
                        x = size.width,
                        y = size.height
                    )
                    lineTo(
                        x = 0f,
                        y = size.height
                    )
                    close()
                }
                drawPath(
                    path = wavesPath,
                    color = waterWavesColor,
                )
            }

            //Draw the bottle cap
            drawRoundRect(
                color = capColor,
                size = Size(capWidth, capHeight),
                topLeft = Offset(size.width / 2 - capWidth / 2f, 0f),
                cornerRadius = CornerRadius(45f, 45f)
            )


        }
        val text = buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    color = if (waterPercentage > 0.5f) bottleColor else waterWavesColor,
                    fontSize = 44.sp
                )
            ) {
                append(usedWaterAmountAnimation.toString())
            }
            withStyle(
                style = SpanStyle(
                    color = if (waterPercentage > 0.5f) bottleColor else waterWavesColor,
                    fontSize = 22.sp
                )
            ) {
                append(" ")
                append(unit)
            }
        }

        Box(
            modifier = Modifier
                .fillMaxSize()
                .fillMaxHeight(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = text)
        }
    }
}

merupakan fungsi utama dalam aplikasi ini. Fungsi ini bertanggung jawab untuk menampilkan animasi botol serta mengisi air secara visual sesuai jumlah air yang digunakan. Fungsi ini menerima beberapa parameter penting, seperti totalWaterAmount, unit, dan usedWaterAmount. Parameter tersebut menentukan kapasitas maksimal botol, satuan ukur yang digunakan (misalnya mililiter), serta jumlah air yang saat ini terdapat dalam botol. Di dalam fungsi ini juga terdapat animasi yang mengatur tampilan air di dalam botol agar perubahannya terlihat mulus dan natural.

Dokumentasi: