# Making UI Animation Easy & Fun
---
# animation in flutter
powerful 💪, but verbose 🫠
Note: Flutter Animation 非常強大，但用起來也可能非常冗，[範例程式碼](https://dartpad.dev/810896d72765464fbfc8a4179b1be96c)
---
# animation should be easy & fun ✨
add, refine, discard 🎈
Note:
- add: 容易添加
- refine: 可以通過優化來玩
- discard：如果不起作用，應該可以輕鬆移除
---
# 🧁 an intuitive layer on your UI code
Note: 動畫最終應該是，在你的 UI 代碼之上，很直觀的一層，概念有點像蛋糕上面的糖霜
---
## Flutter animate v4.0.0
by gskinner
Note:
- [flutter_animate](https://github.com/gskinner/flutter_animate)
- [blog.gskinner - introducing-flutter-animate](https://blog.gskinner.com/archives/2022/09/introducing-flutter-animate.html)
- 程式碼 - 範例一 Flutter 很酷的地方，有提供擴展方法 (Extension methods)
- 接下來就簡單的展示一下
---
Note:
- 雖然不一定會使用上這個 plugin，但可以參考他們的代碼架構，及以實現的模板效果
---
# Thank you 🥹
Note:
* 動畫可以提升用戶體驗，引導用戶了解應用程序。
* 在創建動畫的過程中，需要考慮協調多個動畫、流暢性和性能表現等因素。
* Flutter 的動畫系統提供了多種創建動畫的工具，如縮放、旋轉和透明度等。
* 通過測試和迭代，可以創建出更加完美的動畫效果。
---
{"breaks":true,"metaMigratedAt":"2023-06-17T21:25:14.296Z","metaMigratedFrom":"YAML","title":"Making UI Animation Easy & Fun","slideOptions":"{\"spotlight\":{\"enabled\":true}}","contributors":"[{\"id\":\"911de02f-c8f8-4ddb-a91f-64cf7623d126\",\"add\":1175,\"del\":75}]"}