Untuk menonton postingan ini dalam bentuk video, lihat video YouTube kami di sini.
Artikel ini pada awalnya ditulis Emily Fortuna, dan telah diposting atas namanya.
Jadi, Anda telah memutuskan untuk memasukkan animasi ke dalam aplikasi Flutter — sungguh menyenangkan! Masalahnya adalah, terdapat banyak widget animasi yang berbeda sehingga mencari tahu mana yang paling tepat bukanlah hal yang mudah. Untungnya, artikel ini disediakan untuk membantu!
Saya akan membahas serangkaian pertanyaan yang harus Anda ajukan kepada diri sendiri tentang animasi yang ada dalam pikiran Anda, untuk membantu menentukan bagaimana harus membuatnya. Hal lain yang perlu diingat adalah bahwa widget animasi yang disediakan di library Flutter inti berlevel cukup rendah. Ini berarti bahwa jika Anda merencanakan animasi kompleks, saya sarankan Anda memeriksa beberapa paket animasi yang tersedia di pub.dev yang menyediakan antarmuka tingkat tinggi.
Lihatlah pohon keputusan berikut, yang akan saya jelaskan di artikel ini:




Bagan alur poket untuk semua keputusan animasi Anda.

Secara umum, ada dua tipe animasi utama yang mungkin mau Anda sertakan dalam aplikasi Flutter: animasi berbasis gambar, dan animasi berbasis kode.
Animasi berbasis kode berfokus pada widget dan terpancang pada layout standar dan model sederhana seperti baris, kolom, warna, atau model teks. Bukan berarti mereka membosankan atau biasa saja, tetapi pada intinya mereka cenderung meningkatkan tampilan atau transisi widget tertentu dan tidak bertindak sebagai widget mandiri.
Sebaliknya, animasi berbasis gambar, terlihat seperti seseorang menggambarnya. Mereka sering kali berupa sprite mandiri, seperti karakter game, atau melibatkan transformasi yang sulit diterapkan secara murni dengan kode.
Jadi pertanyaan pertama yang harus Anda tanyakan kepada diri sendiri adalah: “Apakah animasi saya lebih menyerupai gambar, atau apakah animasi itu terlihat seperti sesuatu yang Anda bangun dari widget Flutter sederhana?” Jika animasi Anda lebih menyerupai gambar, atau Anda bekerja dengan tim desain yang menyediakan aset gambar vektor atau raster, maka saya sarankan Anda menggunakan fitur pihak ketiga seperti Rive atau Lottie untuk membangun animasi Anda secara grafis, dan kemudian mengekspornya ke Flutter. Ada beberapa paket yang bisa membantu Anda memasukkan aset ini dalam aplikasi Flutter.
Atau, bila animasi Anda melibatkan pengubahan widget — seperti mengubah warna, bentuk, atau posisi — Anda perlu menulis beberapa kode Flutter!

Eksplisit atau implisit?

Animasi berbasis kode Flutter hadir dalam dua jenis: animasi implisit dan eksplisit. Langkah berikutnya adalah mencari tahu jenis yang Anda butuhkan.


Widget Animasi Implisit beranimasi saat nilainya berubah.

Animasi implisit hanya mengandalkan pengaturan nilai baru untuk beberapa properti widget dan Flutter akan mengatur animasinya dari nilai saat ini ke nilai yang baru. Widget ini mudah digunakan dan sangat kuat. Semua animasi yang Anda lihat di atas dibuat dengan widget animasi implisit. Animasi implisit adalah awal yang baik ketika ingin menganimasikan sesuatu.
Animasi eksplisit membutuhkan AnimationController. Mereka disebut “eksplisit” karena hanya mulai menganimasikan ketika diminta secara eksplisit. Anda bisa menggunakan animasi eksplisit untuk melakukan semua yang dapat dilakukan dengan animasi implisit, ditambah kemampuan lainnya. Kekurangannya adalah Anda harus mengelola siklus hidup AnimationController secara manual karena ini bukan widget, yang berarti termasuk dalam stateful widget. Karena alasan itulah, kode Anda biasanya lebih sederhana jika Anda bisa menggunakan widget animasi implisit.
Ada tiga pertanyaan yang harus Anda ajukan kepada diri sendiri untuk menentukan jenis widget yang Anda butuhkan: Apakah animasi saya selalu berulang? Yang saya maksud dengan "selalu" adalah saat ia berada di layar tertentu, atau selama kondisi tertentu terpenuhi, seperti musik dimainkan.
Pertanyaan kedua yang harus Anda ajukan kepada diri sendiri adalah apakah nilai-nilai dalam animasi Anda diskontinu. Contoh dari apa yang saya maksudkan dengan animasi diskontinu adalah animasi lingkaran membesar ini. Lingkaran itu berulang kali dianimasikan kecil-besar, kecil-besar. Ia tidak pernah dianimasikan kecil-besar kemudian mengecil kembali. Dalam kasus ini, ukuran lingkaran itu diskontinu.


Lingkaran yang hanya membesar, tidak pernah mengecil. Ini adalah animasi diskontinu!

Pertanyaan terakhir yang harus Anda ajukan kepada diri sendiri adalah apakah beberapa widget beranimasi secara bersama-sama? Misalnya:


Beberapa kotak dianimasikan bersama-sama.

Bila Anda menjawab “ya” untuk salah satu dari tiga pertanyaan tersebut, Anda perlu menggunakan widget eksplisit. Jika tidak, Anda bisa menggunakan widget implisit! Setelah memutuskan apakah Anda membutuhkan widget implisit atau eksplisit, pertanyaan terakhir akan mengarahkan Anda untuk menemukan widget spesifik yang dibutuhkan.

Widget yang mana?

Tanyakan pada diri sendiri, apakah ada widget bawaan untuk kebutuhan saya? Jika Anda mencari widget animasi implisit bawaan, cari widget bernama AnimatedFoo dengan “Foo” adalah properti yang ingin Anda animasikan, seperti AnimatedOpacity. Cek juga AnimatedContainer karena ini adalah widget yang sangat kuat dan serbaguna untuk berbagai animasi implisit.
Jika Anda tidak bisa menemukan animasi implisit bawaan yang dibutuhkan, Anda dapat menggunakan TweenAnimationBuilder untuk membuat animasi implisit khusus. Sebaliknya, jika Anda mencari widget eksplisit bawaan, mereka biasanya disebut FooTransition, di mana “Foo” adalah properti yang Anda animasikan, seperti SlideTransition.
Jika Anda tidak dapat menemukan animasi eksplisit bawaan yang relevan, ada satu pertanyaan terakhir yang perlu Anda ajukan kepada diri sendiri: Apakah saya menginginkan animasi saya menjadi widget mandiri atau bagian dari widget lain di sekitarnya? Jawaban untuk ini adalah masalah selera. Bila Anda menginginkan animasi eksplisit khusus mandiri, Anda harus memperluas AnimatedWidget. Jika tidak, Anda bisa menggunakan AnimatedBuilder.
Ada satu opsi terakhir yang harus dipertimbangkan jika Anda melihat masalah kinerja, yaitu menganimasikan dengan CustomPainter. Anda bisa menggunakannya seperti AnimatedWidget, tetapi CustomPainter menggambar langsung ke Canvas, tanpa paradigma build widget standar. Ketika digunakan dengan baik, Anda bisa membuat beberapa efek sangat khusus yang rapi atau memaksimalkan kinerjanya. Namun, ketika salah digunakan, animasi Anda dapat menyebabkan lebih banyak masalah kinerja. Jadi, berhati-hatilah dan seperti manajemen memori manual, pastikan Anda tahu apa yang Anda lakukan sebelum memercikkan pointer di mana-mana.

Kesimpulan

Singkatnya, ada rangkaian pertanyaan tingkat tinggi yang bisa Anda ajukan kepada diri sendiri untuk memberikan panduan cara membuat animasi. Urutan pertanyaan itu menciptakan pohon keputusan untuk menentukan widget atau paket yang tepat bagi kebutuhan Anda. Jika Anda menciutkan titik akhir itu, mereka akan jatuh ke dalam garis, yang kira-kira menunjukkan tingkat kesulitannya dari kiri ke kanan. Terima kasih telah membaca, maju dan buat animasi Flutter yang menakjubkan — melalui framework pihak ketiga, atau dengan paket, baik secara eksplisit maupun implisit!


Widget animasi dari yang termudah ... hingga tersulit.