ตอนที่ 8 ทำแอพ Flutter : แอนิเมชัน (Animations) และท่าทาง (Gestures)

11พ.ค. 2023 by รับทำแอพ สบายไอที

แนวคิดแอนิเมชั่นพื้นฐาน
แอนิเมชั่นโดยนัย (Implicit Animations)
แอนิเมชั่นที่ระบุชัดเจน (Explicit Animations)
แอนิเมชั่นที่กำหนดเอง (Custom Animations)
การจัดการท่าทาง (Gestures)
รวมแอนิเมชั่นและท่าทาง (Gestures)

แอนิเมชั่น (Animations) และท่าทาง (Gestures) เป็นส่วนสำคัญของการทำแอพมือถือสมัยใหม่ เนื่องจากพวกมันสามารถปรับปรุงประสบการณ์ผู้ใช้และทำให้การรับทำแอพของคุณมีชีวิตชีวาได้อย่างมาก Flutter ซึ่งมีชุดแอนิเมชั่นและคุณสมบัติการจัดการด้วยท่าทาง (Gestures)มากมาย ทำให้นักพัฒนาสามารถทำแอพที่น่าสนใจและโต้ตอบได้ ในบทความนี้ เราจะสำรวจแนวคิดพื้นฐานของแอนิเมชันและท่าทาง (Gestures) ในการทำแอพ Flutter และเรียนรู้วิธีนำไปใช้ในโครงการของคุณ

1. แนวคิดแอนิเมชั่นพื้นฐาน

แอนิเมชันในการทำแอพ Flutter สร้างขึ้นโดยใช้ชุด API ที่ทรงพลังและยืดหยุ่น ซึ่งช่วยให้นักพัฒนาสามารถสร้างเอฟเฟ็กต์ภาพได้หลากหลาย ส่วนประกอบที่สำคัญของแอนิเมชั่น Flutter คือ:

แอนิเมชัน: แสดงถึงค่าที่เปลี่ยนแปลงตลอดเวลา
AnimationController: จัดการความคืบหน้าและระยะเวลาของแอนิเมชั่น
Tweens: กำหนดช่วงของค่าที่แอนิเมชั่นจะต้องผ่าน
Listeners และ StatusListeners: แจ้งเตือนเมื่อค่าแอนิเมชั่นหรือสถานะเปลี่ยนแปลง

2. แอนิเมชั่นโดยนัย (Implicit Animations)

แอนิเมชั่นโดยนัยเป็นวิธีที่ง่ายที่สุดในการสร้างแอนิเมชั่นในในการทำแอพ Flutter พวกเขาเคลื่อนไหวการเปลี่ยนแปลงของคุณสมบัติเมื่อเวลาผ่านไปโดยอัตโนมัติโดยไม่ต้องใช้กลไกการควบคุมที่ซับซ้อน วิดเจ็ตแอนิเมชันโดยปริยายที่ใช้กันโดยทั่วไป ได้แก่:

AnimatedContainer: เคลื่อนไหวระหว่างคุณสมบัติของคอนเทนเนอร์ต่างๆ เช่น ขนาด สี และเส้นขอบ
AnimatedOpacity: เปลี่ยนความทึบของวิดเจ็ตเมื่อเวลาผ่านไป
AnimatedPositioned: เคลื่อนไหวตำแหน่งของเด็กในกอง
AnimatedCrossFade: จางหายไประหว่างเด็กสองคนที่ได้รับ

ตัวอย่าง: AnimatedOpacity

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 1),
  child: Text('Hello, Flutter!'),
);

3. แอนิเมชั่นที่ระบุชัดเจน (Explicit Animations)

แอนิเมชั่นที่ระบุชัดเจนให้การควบคุมและความยืดหยุ่นมากกว่าเมื่อเทียบกับแอนิเมชั่นโดยนัย จำเป็นต้องใช้ AnimationController ซึ่งช่วยให้คุณสามารถเริ่ม หยุด หรือย้อนกลับแอนิเมชั่นได้ตามต้องการ วิดเจ็ตแอนิเมชั่นที่ระบุชัดเจน ได้แก่ :

FadeTransition: เปลี่ยนความทึบของเด็ก
RotationTransition: หมุนลูกรอบจุดหมุน
ScaleTransition: เปลี่ยนขนาดของเด็ก
SlideTransition: ย้ายลูกไปตามการชดเชย

ตัวอย่าง: FadeTransition

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(seconds: 1),
    vsync: this,
  );
  _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
}

@override
Widget build(BuildContext context) {
  return FadeTransition(
    opacity: _animation,
    child: Text('Hello, Flutter!'),
  );
}

4. แอนิเมชั่นที่กำหนดเอง (Custom Animations)

บางครั้ง คุณอาจต้องสร้างแอนิเมชั่นแบบกำหนดเองที่ไม่พร้อมใช้งานในวิดเจ็ตในตัวของ Flutter ในกรณีดังกล่าว คุณสามารถใช้ AnimatedBuilder หรือ AnimatedWidget เพื่อสร้างแอนิเมชั่นที่คุณกำหนดเอง

ตัวอย่าง: แอนิเมชั่นการตีกลับ (Bouncing) แบบกำหนดเอง

class BouncingAnimation extends StatefulWidget {
  final Widget child;

  BouncingAnimation({required this.child});

  @override
  _BouncingAnimationState createState() => _BouncingAnimationState();
}

class _BouncingAnimationState extends State<BouncingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController? _controller;
  Animation<double>? _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: 0.0, end: 50.0).animate(_controller!);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation!,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, -_animation!.value),
          child: child,
        );
      },
      child: widget.child,
    );
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }
}

5. การจัดการท่าทาง (Gestures)

ท่าทาง (Gestures) สัมผัสเป็นส่วนสำคัญของอินเทอร์เฟซการทำแอพบนอุปกรณ์เคลื่อนที่สมัยใหม่ เนื่องจากช่วยให้ผู้ใช้สามารถโต้ตอบกับแอพในลักษณะที่เป็นธรรมชาติและเป็นธรรมชาติมากขึ้น Flutter มีชุดคุณสมบัติการจัดการท่าทาง (Gestures) ที่ครอบคลุม รวมถึง:

GestureDetector: วิดเจ็ตแบบไม่ใช้ภาพที่ตรวจจับท่าทาง (Gestures) ประเภทต่างๆ เช่น แตะ แตะสองครั้ง กดค้าง ลาก และปรับขนาด
InkWell และ InkResponse: วิดเจ็ตป้อนกลับด้วยภาพที่แสดงผลกระเซ็นเมื่อสัมผัส
Dismissible : วิดเจ็ตที่ Dismissible ได้โดยการลากไปในทิศทางที่ต้องการ

ตัวอย่าง: GestureDetector พร้อม onTap

GestureDetector(
  onTap: () {
    print('Hello, Flutter!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('Tap me'),
    ),
  ),
);

6. รวมแอนิเมชั่นและท่าทาง (Gestures)

ด้วยการรวมแอนิเมชั่นและท่าทาง (Gestures) เข้าด้วยกัน คุณสามารถสร้างอินเทอร์เฟซแอพที่มีการโต้ตอบและไดนามิกสูง เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถควบคุมการเล่นแอนิเมชั่นโดยใช้ท่าทางสัมผัส

ตัวอย่าง: GestureDetector ควบคุม AnimationController

GestureDetector(
  onTap: () {
    if (_controller.isAnimating) {
      _controller.stop();
    } else {
      _controller.repeat();
    }
  },
  child: FadeTransition(
    opacity: _animation,
    child: Text('Hello, Flutter!'),
  ),
);

ในบทความนี้ เราได้สำรวจพื้นฐานของแอนิเมชั่นและท่าทาง (Gestures)ใน Flutter รวมถึงแอนิเมชั่นโดยปริยายและโจ่งแจ้ง แอนิเมชั่นแบบกำหนดเอง การจัดการท่าทาง (Gestures) และการผสมผสานระหว่างแอนิเมชั่นและท่าทาง ด้วยการใช้คุณลักษณะอันทรงพลังเหล่านี้ คุณจะสามารถทำแอพบนอุปกรณ์เคลื่อนที่ที่น่าสนใจและโต้ตอบได้ซึ่งมอบประสบการณ์ผู้ใช้ที่โดดเด่น

ชุดแอนิเมชั่นและท่าทาง (Gestures) APIs ที่หลากหลายของ Flutter ช่วยให้นักพัฒนาสามารถทำแอพมือถือที่ดึงดูดสายตาและตอบสนองสูงได้อย่างง่ายดาย ด้วยความเข้าใจอย่างถ่องแท้เกี่ยวกับแนวคิดเหล่านี้ คุณจะสามารถสร้างประสบการณ์ผู้ใช้ที่น่าพึงพอใจในการทำแอพ Flutter ของคุณได้เป็นอย่างดี