DevCoach 179: Flutter | Ciptakan Animasi Epik dengan Animation

Transcript

1. Ciptakan Animasi Epik dengan Flutter Animation Achmad Ilham Imanuddin Curriculum Developer Multi-platform Flutter
2. Pokok Pembahasan • Berpetualang dengan Flutter Animation • Berkenalan dengan Implicit dan Explicit Animation • Ekplorasi Lebih Jauh dengan Custom Painter Animation Multi-platform Flutter
3. Pernah melihat aplikasi penuh animasi?
4. Wonderous App
5. Loading Animation
6. Pacman Animation
7. Animation
8. Animation Flutter Animation Widget cocok bagi Anda yang ingin menerapkan animasi di dalam aplikasi. Adanya widget yang bergerak mampu menjadi daya tarik pengguna supaya lebih betah ketika memakai aplikasi.
9. Hero Animation Anda dapat menggunakan animasi pada Flutter menggunakan widget Hero. Widget ini dapat memudahkan kita untuk menerapkan animasi yang menarik. Animasi ini memberikan efek terbang dari satu halaman ke halaman lain.
10. Widget Animation https://docs.flutter.dev/ui/widgets/animation
11. Quiz #1 DevCoach 179
12. Quiz #1 DevCoach 179 Sampai saat ini, widget animation apa yang sudah kamu ketahui? Sebutkan 3 widget saja!
13. Kategori Animasi • Implicit Animation • Explicit Animation • Custom Painter
14. Implicit Animation Implicit animations adalah animasi yang pergerakannya diatur secara implisit oleh library animasi Flutter. Anda cukup menentukan nilai awal dan akhir dari properti widget yang ingin dianimasikan. Lalu, sistem akan otomatis membuat animasinya.
15. Implicit Animation
16. Aku ingin menganimasikan ukuran widget Container. Adakah widget animasinya? Tentu ada, namanya AnimatedContainer. 🚀
17. ~ Letʼs code ~
18. Implicit Animation Parameter lain yang dapat Anda pakai adalah curve. Curve menunjukkan pergerakan animasi dari nilai awal menuju nilai akhir. Secara default, animasi menggunakan linear curve.
19. Implicit Animation
20. Curves Animation
21. Curves Animation https://api.flutter.dev/flutter/animation/Curves-class.html
22. Quiz #2 DevCoach 179
23. Quiz #2 DevCoach 179 Parameter apa yang digunakan untuk menentukan periode waktu dalam berjalannya implicit animation?
24. Explicit Animation Explicit animation ini memberikan kebebasan kita sebagai developer untuk mengatur jalannya animasi. Dengan memanfaatkan objek AnimationController, kita mampu mengatur animasi yang diinginkan.
25. Explicit Animation
26. Explicit Animation Animasi jenis ini membutuhkan objek AnimationController. Controller inilah yang memegang kendali terhadap waktu dan pergerakan animasi. Dengan begitu, kita dapat menentukan kapan animasi dimulai atau berhenti.
27. Aku ingin menganimasikan ukuran widget. Adakah widget animasinya? Tentu ada, namanya ScaleTransition. 🚀
28. ~ Letʼs code ~
29. Explicit Animation AnimationController membutuhkan satu parameter wajib bernama vsync yang harus diisi dengan TickerProvider. Apa itu?
30. Animation Concept
31. Explicit Animation
32. Quiz #3 DevCoach 179
33. Quiz #3 DevCoach 179 Apa parameter yang dibutuhkan explicit animation untuk AnimationController?
34. Custom Painter Custom Painter merupakan sebuah cara untuk menggambar bentuk khusus yang tidak tersedia pada Flutter Widget. Dengan Canvas API, Anda dapat membuat bentuk tertentu layaknya melukis di kanvas kosong, seperti membuat garis, bentuk, lekukan, dll.
35. Custom Painter Custom Painter ini bekerja layaknya melukis pada kanvas kosong, di mana Anda dapat membuat bentuk tertentu. Seperti pelukis, Anda bebas menambahkan coretan, garis, bentuk, lekukan, dsb., dengan kombinasi warna yang selaras.
36. Tingkatan pada Animasi
37. Bagaimana kita menentukan animasi yang ingin dibuat?
38. Memilih pendekatan animasi https://docs.flutter.dev/ui/animations
39. Thank You Data Science
40. Feedback! dicoding.id/devcoachfeedback