Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Belajar Google Flutter dari Dasar: Membuat Animasi Widget

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Grids, Lists, and Data Sources
Google Flutter From Scratch: Using Firebase Services

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Animasi, jika digunakan dengan benar, dapat membuat perbedaan besar dalam bagaimana pengguna memandang aplikasi Anda. Aplikasi dengan banyak animasi yang cepat dan cenderung halus terlihat jauh lebih rapi dan profesional daripada yang tidak. Di Google Play, aplikasi jual beli yang ramai, itu bisa menandakan perbedaan antara sukses dan gagal.

Flutter mungkin adalah satu-satunya development framework aplikasi hybrid yang tersedia saat ini, yang mengizinkan Anda untuk membuat animasi kompleks yang dapat berjalan secara konstan pada 60 frame per detik. Dalam tutorial ini, saya akan membantu Anda memahami dasar-dasar animasi widget Flutter. Saya juga akan memperkenalkan beberapa widget baru yang dapat menyederhanakan kode animasi Anda.

1. Mempersiapkan Widget untuk Animasi

Framework Flutter mengharapkan Anda untuk mengikuti pendekatan secara fungsional, reaktif terhadap pemrograman. Oleh karena itu, untuk dapat mengaktifkan widget, Anda harus dapat memperbarui bagian itu berulang kali, pada interval waktu yang tepat.

Untuk membuat widget yang mudah dianimasikan, mulailah dengan membuat class yang meng-extend class StatefulWidget dan melakukan override terhadap method createState(). Di dalam method, pastikan Anda mengembalikan instance dari State.

Agar dapat dianimasikan, objek state yang Anda asosiasikan dengan stateful widget Anda tidak hanya harus meng-extend class State, itu juga harus menggunakan mixin yang disebut SingleTickerProviderStateMixin. Seperti namanya, mixin menawarkan objek Ticker, yang secara berulang kali menghasilkan callback, yang secara konvensional dikenal sebagai ticks. Karena object ticks dihasilkan berulang kali pada interval waktu yang sama, Anda dapat menggunakannya untuk memutuskan kapan masing-masing frame animasi Anda ditampilkan.

2. Membuat Animasi Tween

Animasi tween adalah salah satu animasi paling sederhana yang dapat Anda buat dengan Flutter. Saat membuatnya, yang perlu Anda lakukan adalah memberikan dua nilai yang berbeda: nilai awal dan nilai akhir. Framework kemudian akan secara otomatis menghasilkan satu set nilai menengah — atau di antara nilai — yang dimulai dari nilai awal dan secara halus bertambah untuk menyesuaikan dengan nilai akhir. Dengan secara bertahap menerapkan nilai-nilai perantara tersebut ke properti widget Anda, Anda melakukan animasi pada properti itu.

Sekarang mari kita membuat animasi tween sederhana yang memindahkan widget dari sudut kiri atas layar ke sudut kanan atas layar. Dengan kata lain, mari kita animasikan properti widget left.

Untuk membuat dan mengontrol animasi, Anda akan memerlukan objek Animation dan objek AnimationController. Tambahkan mereka sebagai anggota variabel state Anda:

Anda harus menginisialisasi kedua objek dengan melakukan override method initState() dari class Anda. Di dalam method, panggil konstruktor dari class AnimationController untuk menginisialisasi controller. Ini mengharapkan objek TickerProvider sebagai salah satu inputnya. Karena state sudah menggunakan mixin SingleTickerProviderStateMixin, Anda dapat meneruskan this padanya. Selain itu, Anda dapat menggunakan properti duration untuk menentukan durasi animasi.

Kode berikut membuat controller animasi yang durasinya empat detik:

Di saat ini, Anda bisa membuat objek Tween yang menentukan nilai awal dan akhir dari animasi Anda.

Untuk menghubungkan objek Tween dengan objek AnimationController, Anda harus memanggil method animate(). Nilai balik dari method ini adalah objek Animation, yang dapat Anda simpan di variabel anggota kedua dari class Anda.

Objek Animation menghasilkan sebuah animasi event untuk setiap tick dari ticker, yang harus Anda tangani agar animasi Anda berfungsi. Untuk melakukannya, Anda dapat menggunakan method addListener(). Selain itu, di dalam event handler, Anda harus memanggil method setState() untuk memperbarui status widget Anda dan menggambarnya kembali. Kode berikut menunjukkan caranya:

Perhatikan bahwa Anda tidak perlu menulis kode apa pun di dalam method setState() kecuali Anda memiliki variabel state lain untuk diperbarui.

Terakhir, untuk memulai animasi, Anda harus memanggil method forward() dari controller animasi.

Animasi sudah siap. Namun, Anda masih belum dapat menerapkannya pada widget apa pun yang sedang digambar di layar. Untuk saat ini, saya sarankan Anda menerapkannya ke widget Positioned yang berisi Material widget Icon. Untuk melakukannya, saat membuat widget, cukup atur nilai properti left ke properti value dari objek Animation.

Dengan demikian, tambahkan kode berikut, yang akan meng-override method build(), menuju kondisi:

Perhatikan bahwa ada widget Stack di atas widget tree karena widget Positioned harus selalu disematkan di dalamnya.

Anda dapat menjalankan aplikasi Anda sekarang untuk melihat animasinya.

3. Menangani Status Animasi dari Event

Jika Anda ingin diberi tahu ketika animasi Anda telah berakhir, Anda dapat melampirkan objek AnimationStatusListener ke objek Animasi Anda. Di dalam listener, jika status animasi saat ini completed atau dismissed, Anda dapat memastikan bahwa animasi telah berakhir.

Animasi Tween di Flutter dapat dibalik. Itulah alasan mengapa ada dua status konstanta berbeda yang menandakan akhir animasi. Jika status saat ini completed, itu artinya bahwa animasi telah berakhir pada nilai akhir tween. Jika dismissed, itu berarti bahwa animasi telah berakhir pada nilai awal. Dengan menggunakan dua status method forward() dan reverse(), Anda dapat dengan mudah membuat kesana-kemari di antara animasi.

Kode berikut, yang bisa Anda tambahkan ke method initState(), menunjukkan cara mengembalikkan dan mengulangi animasi yang Anda buat pada langkah sebelumnya:

Jika Anda kembali menjalankan aplikasi, Anda akan melihat animasi berulang tanpa henti.

4. Menggunakan Widget Animasi

Framework Flutter menawarkan beberapa animasi widget yang sudah siap pakai yang dapat Anda gunakan untuk membuat kode animasi Anda sedikit lebih efektif dan dapat digunakan kembali. Mereka semua adalah subclass dari class AnimatedWidget dan mengharapkan objek Animation atau AnimationController di konstruktor mereka.

Salah satu widget animasi yang paling umum digunakan adalah widget RotationTransition. Ini mengizinkan Anda untuk dengan cepat menerapkan animasi rotasi kepada anak-anaknya. Untuk menggunakannya, pertama buat controller animasi baru. Kode berikut membuat kode yang durasinya diatur ke enam detik:

Untuk memulai animasi kali ini, sebagai ganti method forward(), gunakan method repeat(). Ini memastikan bahwa animasi berulang tanpa henti.

Untuk mempermudah, Anda dapat menggunakan widget Text sebagai child dari widget RotationTransition. Jadi buat widget tree yang sesuai. Saat membuat widget RotationTransition, pastikan Anda menetapkan nilai dari properti turns ke objek AnimationController yang baru saja Anda buat. Secara opsional, Anda dapat menempatkan kedua widget di dalam widget Center. Seperti ini caranya:

Pada kode di atas, saya menggunakan Unicode emoji codepoint sebagai konten widget Text. Ini diperbolehkan karena dari awal Flutter mendukung sebuah emoji.

Saat menjalankan aplikasinya lagi, Anda akan melihat sesuatu seperti ini di layar Anda:

Sangat mirip dengan widget RotationTransition adalah widget ScaleTransition. Seperti yang sudah Anda duga, ini dapat membuat Anda menganimasikan sesuatu untuk skala dari child-nya. Saat membuatnya, yang perlu Anda lakukan adalah meneruskan objek AnimationController ke propertiscale. Kode berikut menunjukkan kepada Anda bagaimana caranya:

Anda sekarang dapat melihat perubahan skala widget Text selama animasi.

Jika Anda bertanya-tanya mengapa kami tidak membuat objek Tween untuk animasi di atas, itu karena, secara dasar, AnimationController class menggunakan 0.0 dan 1.0 sebagai nilai begin / awal dan nilai end / akhir.

5. Menggunakan Kurva

Semua animasi yang kami buat pada langkah sebelumnya mengikuti kurva linier. Akibatnya, mereka tidak terlihat sangat realistis. Dengan mengubah cara objek Tween menghasilkan nilai menengah, Anda bisa mengubahnya.

Flutter memiliki class yang disebut CurvedAnimation, yang mengizinkan Anda untuk menerapkan kurva non-linear ke Tween Anda. Saat Anda menggunakannya dengan class Curves, yang menawarkan berbagai kurva, seperti easeIn dan easeOut, Anda dapat membuat animasi yang terasa lebih alami.

Untuk membuat objek CurvedAnimation, Anda memerlukan objek AnimationController sebagai parent. Anda bebas menggunakan salah satu controller yang Anda buat pada langkah sebelumnya atau membuat yang baru. Kode berikut membuat controller baru yang durasinya diatur ke lima detik, dan objek CurvedAnimation yang dimana properti curve diatur menjadi kurva bounceOut:

Anda sekarang dapat membuat objek Tween dan menerapkan objek CurvedAnimation padanya dengan memanggil method animate(). Setelah animasi siap, jangan lupa untuk menambahkan listener ke animasi, perbarui state, lalu panggil method forward() untuk memulainya.

Untuk melihat animasi, mari kita terapkan properti top pada widget Positioned. Anda bebas menambahkan widget child di dalamnya. Dalam kode berikut, saya menambahkan widget Text yang menampilkan emoji lainnya.

Setelah melakukan restart, aplikasi Anda sekarang akan menampilkan animasi berikut:

Kesimpulan

Anda sekarang tahu dasar-dasar membuat animasi tween menggunakan framework Flutter. Dalam tutorial ini, Anda juga belajar cara membuatnya tampak lebih alami dengan menggunakan kurva. Memahami bahwa dalam mode lambat, yang merupakan mode dasar diatur selama pengembangan, animasi mungkin tampak sedikit lamban dan tidak stabil. Hanya dalam mode rilis Anda dapat melihat kinerja mereka yang sebenarnya.

Untuk mempelajari lebih lanjut, silakan melihat referensi ke dokumentasi resmi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.