Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การจัดการ Animation และ Transition ขั้นสูง

บทที่ 14: การจัดการ Animation และ Transition ขั้นสูง

🔖 หมวดบทเรียน: การใส่ความเคลื่อนไหวเพื่อเพิ่มความรู้สึกและคุณภาพให้ 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 ออกเป็นสัดส่วน