Flutter Effects - Membuat Animasi Staggered Menu | Koding Indonesia

Flutter Effects – Membuat Animasi Staggered Menu

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-temanMembuat Efek Scrolling Parallax


Satu layar aplikasi mungkin berisi banyak animasi, namun memutar semua animasi tersebut pada saat yang sama dapat membuat pengguna kebingungan tapi memutar animasi satu persatu pun dapat memakan waktu. Jalan terbaik adalah mengatur animasi tersebut secara bergantian (Staggered Effect). Setiap animasi dimulai pada waktu yang berbeda, tetapi animasi tersebut tumpang tindih untuk membuat durasi yang lebih pendek. Pada artikel ini, kita akan membuat menu dengan konten animasi staggered dan memiliki tombol yang muncul di bagian bawahnya. Contohnya sebagai berikut:

Staggered Menu Animation Example

Berikut langkah-langkah untuk membuatnya:

1. Buat Menu tanpa Animasi

Drawer menu menampilkan list judul, yang kemudian diikuti dengan tombol “Get Started” pada bagian bawah menu.

Selanjutnya kita definisikan statefull widget Menu yang menampilkan list dan tombol pada lokasi statis.

2. Menyiapkan Animasi

Untuk mengontrol waktu dari animasi kita membutuhkan AnimationController. Oleh karena itu kita tambahkan SingleTickerProviderStateMixin pada class MenuState kemudian deklarasikan dan buat instance AnimationController.

Lamanya delay setiap animasi tergantung berapa lama kita mengaturnya, maka disini kita akan mendefinisikan delay animasi, durasi animasi individual, dan total durasi animasi.

Dalam hal ini, semua animasi memiliki delay hingga 50 milidetik. Setelah itu, list item mulai muncul. Kemunculan setiap list item tertunda selama 50 milidetik setelah list item sebelumnya mulai meluncur masuk. Setiap list item membutuhkan waktu 250 milidetik untuk bergeser dari kanan ke kiri. Setelah list item terakhir mulai meluncur masuk, tombol di bagian bawah menunggu 150 milidetik lagi untuk muncul sehingga animasi tombol membutuhkan waktu 500 milidetik.

Dengan ditentukannya setiap delay dan durasi animasi, kemudian durasi total dihitung sehingga dapat digunakan untuk menghitung waktu animasi individual. Berikut waktu animasi yang ditunjukkan pada diagram berikut:

Flutter menyediakan kelas Interval dan interval sendiri membutuhkan persentase waktu mulai dan persentase waktu berakhir. Interval tersebut kemudian dapat digunakan untuk menganimasikan nilai antara waktu mulai dan akhir tersebut. Misalnya, untuk animasi yang membutuhkan waktu 1 detik, interval animasi tersebut dari 0,2 hingga 0,5 akan dimulai pada 200 milidetik (20%) dan berakhir pada 500 milidetik (50%).

Selanjutnya deklarasikan dan hitung Interval setiap list item dan Interval tombol bawah.

3. Memberikan Animasi pada List Item dan Tombol

Efek animasi staggered akan berjalan ketika menu muncul dan cara memulai animasi tersebut menggunakan initState().

Setiap list item Each bergeser dari kanan ke kiri dan fade in pada saat bersamaan. Oleh karena itu kita akan menggunakan Interval pada list item’s dan easeOut curve untuk menganimasikan opacity dan menerjemahkan setiap list item.

Selanjutnya gunakan pendekatan yang sama untuk menganimasikan opacity dan scale dari tombol bawah. Kali ini kita gunakan elasticOut curve untuk memberi springy effect pada tombol.

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya :


Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. 😀😀😀😀😀😀😀 Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Author avatar
Anton Prafanto
Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda