Rive: คืออะไร, เครื่องมืออนิเมชันสำหรับ Flutter และ iOS

Rive คืออะไร?

Rive (เดิมชื่อ Rive.app, ก่อตั้งในปี 2016) เป็นโปรแกรมแก้ไขกราฟิกและรันไทม์ข้ามแพลตฟอร์มสำหรับอนิเมชันเวกเตอร์แบบอินเทอร์แอคทีฟ แตกต่างจาก After Effects + Bodymovin (Lottie) Rive มีสภาพแวดล้อมแบบรวม: นักออกแบบวาด, ทำอนิเมชัน และกำหนดค่าตรรกะการเปลี่ยนได้โดยตรงในโปรแกรมแก้ไข ผลลัพธ์ถูกส่งออกเป็นไฟล์ .riv ไบนารีที่มีน้ำหนัก 2 ถึง 50 KB ขึ้นอยู่กับความซับซ้อน

ความแตกต่างหลักของ Rive จากโซลูชันอื่นคือ State Machine เป็นกราฟภาพที่โหนดคืออนิเมชัน (Idle, Hover, Press, Active) และการเปลี่ยนระหว่างโหนดถูกเรียกใช้โดยทริกเกอร์ (Touch, Drag, Boolean) นักพัฒนาเพียงส่งทริกเกอร์ในโค้ด และ RiveRuntime ตัดสินใจว่าจะเล่นอนิเมชันใดและจะสลับระหว่างอนิเมชันเหล่านั้นอย่างราบรื่นได้อย่างไร ตามRive Engineering (2026) อนิเมชัน .riv เฉลี่ยกับ State Machine ใช้พื้นที่ 15 KB — เล็กกว่าไฟล์วิดีโอเทียบเท่า 5–10 เท่า

Rive Runtime พร้อมใช้งานสำหรับ Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) และ React การเรนเดอร์ทำผ่าน Skia (Flutter/Web), Core Graphics (iOS) หรือ Canvas (Android) Rive รองรับอนิเมชันรูปทรง (Knob, Slider, Button ที่มีเรขาคณิตแบบกำหนดเอง) ทำให้สามารถสร้างส่วนประกอบ UI ที่เคลื่อนไหวได้อย่างเต็มที่ ไม่ใช่แค่อนิเมชันตกแต่ง

Rive vs Lottie: การเปรียบเทียบแนวทาง

Rive และ Lottie แก้ปัญหาที่แตกต่างกัน Lottie เป็นเครื่องเล่นสำหรับอนิเมชันสำเร็จรูปจาก After Effects เหมาะสำหรับเอฟเฟกต์ตกแต่งแบบพาสซีฟ Rive เป็นเครื่องมือสำหรับสร้างอนิเมชันแบบอินเทอร์แอคทีฟด้วยตรรกะของตัวเอง โดยที่อนิเมชันตอบสนองต่อการกระทำของผู้ใช้ การเลือกขึ้นอยู่กับระดับการโต้ตอบที่ต้องการ

เมื่อใดควรเลือก Rive: ปุ่มแบบอินเทอร์แอคทีฟพร้อมการตอบสนองเมื่อกด, องค์ประกอบเกม (ตัวละครที่มีสถานะ), สวิตช์แบบเคลื่อนไหว, ไอคอนไดนามิกที่ตอบสนองต่อสถานะ เมื่อใดควรเลือก Lottie: ตัวโหลดล่วงหน้า, ถูกใจ, หน้าต้อนรับ, อนิเมชันเน้นเสียงโดยไม่มีตรรกะ สำหรับโปรเจกต์ Flutter Rive เป็นตัวเลือกที่ต้องการเนื่องจากการรวมแบบเนทีฟกับ Skia และไปป์ไลน์การเรนเดอร์ของ Flutter

การรวม Rive ใน Flutter (Dart)

ใน Flutter RiveAnimation เป็นวิดเจ็ตหลักสำหรับฝังไฟล์ .riv สามารถใช้งานได้ผ่านแพ็คเกจ rive (ทางการ) RiveAnimation รองรับอาร์กิวเมนต์: artboard (การเลือกบอร์ด), animation (ชื่ออนิเมชัน), fit, alignment, controllers (สำหรับ State Machine) สำหรับฉากแบบอินเทอร์แอคทีฟจะใช้ StateMachineController

import 'package:rive/rive.dart';

// การเล่นอนิเมชันแบบง่าย
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController พร้อมทริกเกอร์
class InteractiveButton extends StatefulWidget {
  @override
  State<InteractiveButton> createState() => _InteractiveButtonState();
}

class _InteractiveButtonState extends State<InteractiveButton> {
  StateMachineController? _controller;
  SMIInput<bool>? _isPressed;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _isPressed?.value = true,
      onTapUp: (_) => _isPressed?.value = false,
      child: RiveAnimation.asset(
        'assets/animations/button.riv',
        fit: BoxFit.contain,
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          if (_controller != null) {
            artboard.addController(_controller!);
            _isPressed = _controller!.findInput<bool>('isPressed');
          }
        },
      ),
    );
  }
}

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Flutter: โหลดไฟล์ .riv แบบอะซิงโครนัสผ่าน RiveAnimation.asset (AssetBundle ในตัว) สำหรับรายการ (ListView) ให้ใช้ StateMachineController เดียวที่นำกลับมาใช้ใหม่ระหว่างรายการ Rive ไม่ต้องการการนำเข้าแยกต่างหากอีกต่อไป — rive v0.12+ มีฟีเจอร์ทั้งหมด สำหรับอนิเมชันแบบกำหนดเอง ให้ควบคุม RiveAnimationController โดยตรง — ให้การเข้าถึงอนิเมชัน การผสม (blend) และความเร็ว

การรวม Rive ใน iOS (Swift)

ใน iOS RiveRuntime แสดงโดยคลาส RiveView (UIKit) และ RiveViewModel (SwiftUI) ไลบรารีเชื่อมต่อผ่าน Swift Package Manager RiveView เรนเดอร์ไฟล์ .riv ผ่าน Core Graphics และ Metal รองรับ 120 FPS บนจอ ProMotion สำหรับ State Machine จะใช้ RiveStateMachineLayer พร้อมการผูกทริกเกอร์

import RiveRuntime

// SwiftUI: RiveViewModel พร้อมอนิเมชัน
struct RiveAnimationView: View {
    @State private var isPressed = false

    var body: some View {
        RiveViewModel(fileName: "button").view()
            .frame(width: 200, height: 60)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in
                        if !isPressed {
                            isPressed = true
                            // ทริกเกอร์ผ่าน State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView พร้อมควบคุมด้วยตนเอง
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// การจัดการ State Machine
riveView.triggerInput(named: "startAnimation")

แนวทางปฏิบัติที่ดีที่สุดสำหรับ iOS: ใช้ RiveViewModel สำหรับ SwiftUI — จัดการวงจรชีวิตโดยอัตโนมัติ สำหรับ UIKit สมัครรับ RiveViewDelegate เพื่อติดตามเหตุการณ์ Rive กิน CPU น้อยกว่า Lottie บน iOS เนื่องจากการเรนเดอร์ผ่าน Core Graphics สำหรับอนิเมชันใน NavigationView/UICollectionView ให้ใช้การโหลดล่วงหน้าผ่าน RiveFile.preload()

การรวม Rive ใน Android (Kotlin)

ใน Android RiveAnimationView เป็น View หลักสำหรับฝังอนิเมชัน .riv ไลบรารี app.rive:rive-android เชื่อมต่อผ่าน Gradle RiveAnimationView สืบทอดจาก View และเรนเดอร์ผ่าน Canvas ด้วยการสนับสนุนการเร่งด้วยฮาร์ดแวร์ State Machine จัดการผ่าน setTriggers และ setInputs

// build.gradle.kts
implementation("app.rive:rive-android:0.9.0")

// XML layout
<app.rive.RiveAnimationView
    android:id="@+id/riveView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rive_file="@raw/mascot"
    app:rive_artboard="Mascot"
    app:rive_animation="idle" />

// Kotlin: การจัดการ State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> ส่งทริกเกอร์ไปยัง State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// การจัดการเมื่ออนิเมชันเสร็จ
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Android: โหลดไฟล์ .riv ผ่าน res/raw (ทรัพยากรในตัว) หรือ assets (การโหลดผ่านเครือข่าย) RiveAnimationView จัดการวงจรชีวิตโดยอัตโนมัติ — อย่าเรียก play/pause ด้วยตนเองใน onResume/onPause สำหรับอนิเมชันใน RecyclerView ให้ใช้ setOnScrollListener เพื่อหยุดการเล่นชั่วคราวเมื่อเลื่อน ตามเอกสาร Rive (2026) ไฟล์ .riv สูงถึง 100 KB ถูกแยกวิเคราะห์ใน 5–10 ms บนอุปกรณ์ระดับกลาง

State Machine: ตรรกะการเปลี่ยนใน Rive

State Machine เป็นฟีเจอร์หลักของ Rive ที่ทำให้แตกต่างจากรูปแบบอนิเมชันแบบพาสซีฟ เป็นกราฟภาพที่จุดยอดคือสถานะ (อนิเมชัน) และขอบคือการเปลี่ยนที่ถูกเรียกใช้โดยทริกเกอร์ State Machine ถูกสร้างขึ้นใน Rive Editor: นักออกแบบเพิ่มโหนดอนิเมชัน, เชื่อมต่อด้วยเส้น และกำหนดทริกเกอร์ (Touch, Boolean, Number) นักพัฒนาเพียงส่งทริกเกอร์เหล่านี้จากโค้ด

// Flutter: การควบคุม State Machine อย่างสมบูรณ์
import 'package:rive/rive.dart';

class RiveStateMachineWidget extends StatefulWidget {
  @override
  State<RiveStateMachineWidget> createState() => _RiveStateMachineWidgetState();
}

class _RiveStateMachineWidgetState extends State<RiveStateMachineWidget> {
  Artboard? _artboard;
  StateMachineController? _controller;
  SMIInput<bool>? _isHovered;
  SMIInput<double>? _progress;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _isHovered?.value = true,
      onExit: (_) => _isHovered?.value = false,
      child: RiveAnimation.asset(
        'assets/interactive_icon.riv',
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          artboard.addController(_controller!);
          _isHovered = _controller!.findInput<bool>('isHovered');
          _progress = _controller!.findInput<double>('progress');
        },
      ),
    );
  }
}

// การส่งค่าตัวเลข
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

ประเภททริกเกอร์: Boolean — สวิตช์ (true/false), Number — ค่าตัวเลข (0.0–1.0 หรือช่วงที่กำหนดเอง), Trigger — ชีพจรครั้งเดียว (กดปุ่ม) ใน Rive Editor สามารถกำหนดค่าการทำให้การเปลี่ยนเรียบ (Transition Duration) — ค่าที่แนะนำ 100–300 ms เพื่อความลื่นไหล สำหรับสถานะ UI ที่ซับซ้อน ให้ใช้ State Machine แบบซ้อน (Nested State Machines) — แต่ละส่วนของอนิเมชันถูกจัดการอย่างอิสระ Rive State Machine ทำงานบนทุกแพลตฟอร์มโดยไม่เปลี่ยนแปลงไฟล์ .riv — ตรรกะการเปลี่ยนถูกฝังในไฟล์ ไม่ใช่ในโค้ดแอปพลิเคชัน