การใช้ Rive (Flare) สำหรับ Vector Animations

การใช้ Rive (Flare) สำหรับ Vector Animations ใน Flutter

ในบทความนี้ เราจะมาเรียนรู้วิธีการใช้ Rive (เดิมชื่อ Flare) เพื่อสร้าง Vector Animations ที่สวยงามและมีประสิทธิภาพในแอปพลิเคชัน Flutter ของคุณ Rive เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง animations ที่สามารถปรับขนาดได้โดยไม่เสียความคมชัด และสามารถนำไปใช้งานได้อย่างหลากหลาย เช่น UI elements, loading indicators, และ interactive animations ต่างๆ

บทความก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการสร้าง Custom Transition Animations ใน Flutter ซึ่งการใช้ Rive จะช่วยให้เราสามารถสร้าง animations ที่ซับซ้อนและน่าสนใจยิ่งขึ้น เพื่อนำไปใช้ในการเปลี่ยนหน้าจอ หรือสร้างประสบการณ์การใช้งานที่ดียิ่งขึ้น

Rive คืออะไร?

Rive เป็นเครื่องมือออกแบบ animations แบบ Vector ที่เน้นการทำงานแบบ Real-time และสามารถนำไปใช้ในหลากหลายแพลตฟอร์ม รวมถึง Flutter ด้วย ข้อดีของการใช้ Vector Animations คือ:

Scalability: สามารถปรับขนาดได้โดยไม่สูญเสียความคมชัด
Performance: โดยทั่วไปมีประสิทธิภาพที่ดีกว่า animations ที่เป็น raster-based
Small File Size: ไฟล์ animation มักจะมีขนาดเล็กกว่าไฟล์ภาพหรือวิดีโอ
Interactivity: สามารถสร้าง animations ที่ตอบสนองต่อการกระทำของผู้ใช้ได้

ขั้นตอนการใช้งาน Rive ใน Flutter

เราจะแบ่งขั้นตอนการใช้งาน Rive ออกเป็นส่วนๆ ดังนี้:

การติดตั้ง Rive Flutter Package: เพิ่ม dependency ใน `pubspec.yaml`
การสร้าง Animation ใน Rive Editor: ออกแบบ animation ที่ต้องการใน Rive Editor
การนำเข้า Animation ไปยัง Flutter: นำเข้าไฟล์ `.flr` (Rive File) เข้าสู่โปรเจกต์ Flutter
การใช้งาน `RiveAnimation` Widget: แสดง animation ในแอปพลิเคชัน
การควบคุม Animation: ควบคุมการเล่น, หยุด, และปรับแต่ง animation

1. การติดตั้ง Rive Flutter Package

เริ่มต้นด้วยการเพิ่ม `rive` package ลงในไฟล์ `pubspec.yaml` ของโปรเจกต์ Flutter ของคุณ:

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.12.0 # ตรวจสอบเวอร์ชันล่าสุดที่ pub.dev

จากนั้นทำการ `flutter pub get` เพื่อติดตั้ง package ที่เพิ่มเข้ามา

2. การสร้าง Animation ใน Rive Editor

Rive Editor เป็นเครื่องมือที่เราใช้ในการสร้างและออกแบบ animations คุณสามารถดาวน์โหลดและใช้งานได้ฟรีจาก rive.app

ขั้นตอนการสร้าง Animation อย่างง่าย:

สร้าง Account และ Login: สร้างบัญชีผู้ใช้ฟรีบน Rive และ Login
สร้าง New Rive File: คลิกที่ปุ่ม "New File"
ออกแบบ Artboard: กำหนดขนาดของ Artboard ให้เหมาะสมกับ animation ที่ต้องการ
สร้าง Shapes: ใช้เครื่องมือต่างๆ ใน Rive Editor เพื่อสร้าง shapes ที่ต้องการ
สร้าง Animation: สร้าง animation โดยการกำหนด keyframes และปรับแต่ง properties ของ shapes
เพิ่ม Artboard: หากต้องการสร้าง animation ที่ซับซ้อนขึ้น สามารถเพิ่ม Artboard ได้
Export Rive File: เมื่อสร้าง animation เสร็จแล้ว ให้ export ไฟล์เป็นนามสกุล `.flr`

ตัวอย่าง: สร้าง Loading Indicator อย่างง่าย

ลองสร้าง loading indicator แบบวงกลมหมุนวน โดยใช้ขั้นตอนต่อไปนี้:

สร้างวงกลม
เพิ่ม keyframe ที่จุดเริ่มต้นของ timeline
เพิ่ม keyframe ที่จุดสิ้นสุดของ timeline
หมุนวงกลม 360 องศาใน keyframe สุดท้าย
ปรับแต่ง easing เพื่อให้การหมุนดูเป็นธรรมชาติ
Export ไฟล์เป็น `loading_indicator.flr`

3. การนำเข้า Animation ไปยัง Flutter

หลังจากที่เราได้ไฟล์ `.flr` จาก Rive Editor แล้ว ให้นำไฟล์นี้ไปใส่ในโฟลเดอร์ `assets` ของโปรเจกต์ Flutter ของคุณ (หากยังไม่มีโฟลเดอร์นี้ ให้สร้างขึ้นมา) และเพิ่ม entry ใน `pubspec.yaml` เพื่อระบุว่าเราต้องการใช้งาน assets นี้:

flutter:
  assets:
    - assets/loading_indicator.flr

อย่าลืมรัน `flutter pub get` อีกครั้งหลังแก้ไข `pubspec.yaml`

4. การใช้งาน `RiveAnimation` Widget

ตอนนี้เราสามารถใช้งาน `RiveAnimation` widget เพื่อแสดง animation ของเราได้แล้ว:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class RiveAnimationExample extends StatefulWidget {
  @override
  _RiveAnimationExampleState createState() => _RiveAnimationExampleState();
}

class _RiveAnimationExampleState extends State<RiveAnimationExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rive Animation Example'),
      ),
      body: Center(
        child: RiveAnimation.asset(
          'assets/loading_indicator.flr',
          fit: BoxFit.contain, // ปรับขนาด animation ให้พอดีกับพื้นที่
        ),
      ),
    );
  }
}

ในโค้ดข้างต้น เราใช้ `RiveAnimation.asset` constructor เพื่อโหลด animation จากไฟล์ `loading_indicator.flr` ที่เราได้นำเข้ามาก่อนหน้านี้ `fit: BoxFit.contain` ใช้เพื่อปรับขนาด animation ให้พอดีกับพื้นที่ที่ widget กำหนด

5. การควบคุม Animation

Rive ช่วยให้เราสามารถควบคุม animation ได้อย่างละเอียด เช่น การเล่น, หยุด, เปลี่ยน animation, และตอบสนองต่อการกระทำของผู้ใช้ เราสามารถทำได้โดยใช้ `Artboard` และ `StateMachineController`

ตัวอย่าง: การควบคุม Animation ด้วย State Machine

สมมติว่าเรามี animation ที่มี State Machine ที่ชื่อว่า "State Machine 1" และมี input ที่ชื่อว่า "BooleanInput" เราสามารถควบคุม animation ได้ดังนี้:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class InteractiveRiveAnimation extends StatefulWidget {
  @override
  _InteractiveRiveAnimationState createState() => _InteractiveRiveAnimationState();
}

class _InteractiveRiveAnimationState extends State<InteractiveRiveAnimation> {
  Artboard? _riveArtboard;
  StateMachineController? _controller;
  SMIInput<bool>? _booleanInput;

  @override
  void initState() {
    super.initState();
    // โหลด Rive animation จาก asset
    rootBundle.load('assets/interactive_animation.flr').then((data) {
      final file = RiveFile.import(data);
      final artboard = file.mainArtboard;
      var controller = StateMachineController.fromArtboard(artboard, 'State Machine 1'); // ระบุชื่อ State Machine
      if (controller != null) {
        artboard.addController(controller);
        _booleanInput = controller.findInput('BooleanInput') as SMIInput<bool>; // ระบุชื่อ input
      }
      setState(() => _riveArtboard = artboard);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Interactive Rive Animation'),
      ),
      body: Center(
        child: _riveArtboard == null
            ? const CircularProgressIndicator()
            : Column(
                children: [
                  Expanded(
                    child: Rive(artboard: _riveArtboard!),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      // สลับค่าของ boolean input
                      _booleanInput?.value = !(_booleanInput?.value ?? false);
                    },
                    child: Text('Toggle Animation'),
                  ),
                ],
              ),
      ),
    );
  }
}

ในโค้ดนี้ เราโหลด animation จากไฟล์ `interactive_animation.flr` และดึง `Artboard` และ `StateMachineController` จากไฟล์นั้น จากนั้นเราใช้ `SMIInput` เพื่อควบคุมค่าของ input ใน State Machine เมื่อผู้ใช้กดปุ่ม "Toggle Animation" ค่าของ `BooleanInput` จะถูกสลับ ซึ่งจะทำให้ animation เปลี่ยนไปตามที่กำหนดไว้ใน State Machine

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

Animation ไม่แสดง: ตรวจสอบให้แน่ใจว่าได้เพิ่ม asset ใน `pubspec.yaml` และรัน `flutter pub get` แล้ว ตรวจสอบ path ของไฟล์ animation ว่าถูกต้องหรือไม่
เกิด Error เมื่อโหลด Animation: ตรวจสอบเวอร์ชันของ `rive` package ว่าเข้ากันได้กับ Rive Editor หรือไม่ ลองอัปเดต package ให้เป็นเวอร์ชันล่าสุด
Animation ไม่ตอบสนองต่อ Input: ตรวจสอบชื่อของ State Machine และ input ว่าถูกต้องหรือไม่ ตรวจสอบว่าได้เพิ่ม controller ลงใน artboard แล้ว
ปัญหาเรื่องขนาดและอัตราส่วน: ใช้ `fit` property ใน `RiveAnimation` widget เพื่อปรับขนาด animation ให้พอดีกับพื้นที่

กรณีใช้งานจริง

Rive สามารถนำไปใช้ในหลากหลายสถานการณ์ เช่น:

Loading Indicators: สร้าง loading animations ที่สวยงามและน่าสนใจ
Interactive Tutorials: สร้าง tutorials ที่มี animations เพื่อแนะนำการใช้งานแอป
Game UI: สร้าง UI elements ที่มี animations เพื่อเพิ่มความน่าสนใจให้กับเกม
Data Visualization: สร้าง charts และ graphs ที่มี animations เพื่อแสดงข้อมูลได้อย่างน่าสนใจ
Microinteractions: สร้าง microinteractions ที่ตอบสนองต่อการกระทำของผู้ใช้

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการใช้ Rive (Flare) เพื่อสร้าง Vector Animations ใน Flutter ตั้งแต่การติดตั้ง package, การสร้าง animation ใน Rive Editor, การนำเข้า animation มายัง Flutter, การใช้งาน `RiveAnimation` widget, และการควบคุม animation ด้วย State Machine Rive เป็นเครื่องมือที่มีประสิทธิภาพและใช้งานง่าย ซึ่งจะช่วยให้คุณสามารถสร้าง animations ที่สวยงามและน่าสนใจให้กับแอปพลิเคชัน Flutter ของคุณได้

ในบทความถัดไป เราจะเรียนรู้เกี่ยวกับการใช้ Lottie สำหรับ After Effects Animations ซึ่งเป็นอีกหนึ่งทางเลือกในการสร้าง animations ใน Flutter