Tugas 7 - Pemrograman Perangkat Bergerak

 Material Design - Animasi Botol Minum

Pada pertemuan kali ini kita akan membuat animasi botol minuman menggunakan material design yang ada. Tahapan yang paling awal ialah membuat sebuah project baru. Setelah selesai dengan membuat project baru, maka masuk kebeberapa tahapan :

1. Deklarasi Variabel 

Pertama sekali itu kita bakalan deklarasi beberapa variabel yang akan dipakai dalam membuat animasi botol minuman. 

2. Buat Variabel Untuk Animasi Air Dibotol

Setelah itu kita bakalan membuat animasi untuk air didalam botol, dimana untuk tiap botton yang akan diklik akan menambahkan sejumlah besar air, dimana totalWaterAmount menyimpan total ukuran maksimal botol dan  usedWaterAmount merupakan isi air pada kondisi awal.

3.  Membuat Animasi Air didalam Botol

Setelah itu langkah terakhir ialah membuat animasi untuk air didalam botol. Ketika tombol Drink di klik maka kapasitas air akan menambah. Didalam kode yang disediakan adalah sebuah fungsi Composable dalam Jetpack Compose yang menggambar komponen berbentuk botol dengan level air yang dianimasikan dan tampilan teks di tengahnya. Box luar, dengan lebar 200.dp dan tinggi 600.dp, berisi Canvas yang menggambar botol secara dinamis. Bentuk botol digambarkan menggunakan objek Path yang mendefinisikan bentuknya, termasuk badan dan tutup botol.

Pada bagian Canvas, lebar dan tinggi dari botol dihitung berdasarkan ukuran yang diberikan. Kemudian, lebar dan tinggi tutup botol dihitung sebagai persentase dari ukuran keseluruhan. Path digunakan untuk menggambar badan botol dengan beberapa titik dan kurva menggunakan metode moveTo, lineTo, dan quadraticBezierTo. Setelah bentuk botol didefinisikan, clipPath digunakan untuk memastikan gambar tetap berada dalam batas-batas botol.

Di dalam clipPath, drawRect digunakan untuk menggambar warna botol secara keseluruhan. Selanjutnya, level air dalam botol digambarkan dengan menghitung posisi Y dari gelombang air berdasarkan persentase air (waterPercentage). Path lain digunakan untuk menggambar gelombang air, yang kemudian diisi dengan warna air menggunakan drawPath. 

Tutup botol digambar menggunakan drawRoundRect, yang membuat persegi panjang dengan sudut yang melengkung di bagian atas botol. Warna dan ukuran tutup ditentukan oleh variabel yang diberikan. Di luar Canvas, sebuah teks dianotasi dibangun menggunakan buildAnnotatedString, yang menampilkan jumlah air yang digunakan dengan ukuran dan warna font yang bervariasi tergantung pada level air di botol. Teks ini ditampilkan di tengah botol menggunakan Box lain yang memiliki contentAlignment yang diatur ke Alignment.Center.

Secara keseluruhan, kode ini menghasilkan tampilan botol yang menarik dengan level air yang bisa dianimasikan dan teks yang menampilkan jumlah air yang digunakan, semuanya dirender secara dinamis berdasarkan nilai-nilai yang diberikan.

Hasil :