🔖 หมวดบทเรียน: การใส่ความเคลื่อนไหวเพื่อเพิ่มความรู้สึกและคุณภาพให้ UI
📌 เหมาะสำหรับ: ผู้ที่ต้องการสร้างแอนิเมชันในแอปให้มีความลื่นไหล ทันสมัย และตอบสนอง
🎯 เป้าหมาย: เข้าใจการใช้ Animation Controller, Tween, Hero และการจัดการ Transition ระหว่าง widget/page
🧭 เกริ่นนำ
Flutter มีระบบ animation ที่ทรงพลังและยืดหยุ่น ตั้งแต่ animation แบบง่าย (Implicit) ไปจนถึง animation ที่ควบคุมเอง (Explicit) เช่น Tween, AnimationController, Hero เป็นต้น การออกแบบ UX ที่ดีมักมี animation ช่วยเพิ่มการตอบสนองและความประทับใจให้ผู้ใช้
🎯 Implicit Animation
AnimatedContainer(
duration: Duration(milliseconds: 500),
width: isActive ? 200 : 100,
height: 100,
color: isActive ? Colors.blue : Colors.grey,
)
🎛️ Explicit Animation
class MyAnimatedBox extends StatefulWidget {
@override
_MyAnimatedBoxState createState() => _MyAnimatedBoxState();
}
class _MyAnimatedBoxState extends State<MyAnimatedBox> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
_controller.forward();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animation,
child: Container(width: 200, height: 200, color: Colors.green),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
🦸 Hero Animation (ระหว่างหน้า)
Hero(
tag: 'imageHero',
child: Image.asset('assets/photo.jpg', width: 100),
)
✅ เทคนิคเพิ่มเติม
- ใช้
CurvedAnimation
เพื่อทำ easing curve - ใช้
AnimatedSwitcher
สลับ widget อย่างลื่นไหล - ลองใช้
rive
หรือlottie
หากต้องการ animation ขั้นสูงแบบ vector
✅ สรุป
- Animation ช่วยยกระดับ UX และ UI
- Flutter รองรับทั้ง implicit และ explicit animation
- Hero animation สร้างความต่อเนื่องระหว่างหน้า
ในบทถัดไปเราจะไปดู การสร้าง Custom Widget เพื่อใช้ซ้ำ และแยก logic ออกเป็นสัดส่วน