Rive: ano ito, tool ng animation para sa Flutter at iOS

Ano ang Rive?

Rive (dating Rive.app, itinatag noong 2016) — ay isang graphic editor at cross-platform runtime para sa interactive na vector animation. Hindi tulad ng After Effects + Bodymovin (Lottie), nagbibigay ang Rive ng pinag-isang kapaligiran: ang designer ay gumuhit, nag-a-animate at nag-configure ng lohika ng transition nang direkta sa editor. Ang resulta ay ini-export sa isang binary .riv file na may timbang na 2 hanggang 50 KB depende sa pagiging kumplikado.

Ang pangunahing pagkakaiba ng Rive mula sa iba pang mga solusyon — State Machine. Ito ay isang visual na graph kung saan ang mga node ay mga animation (Idle, Hover, Press, Active) at ang mga transition sa pagitan ng mga ito ay na-trigger ng mga trigger (Touch, Drag, Boolean). Ang developer sa code ay nagpapadala lamang ng mga trigger, at ang RiveRuntime mismo ang nagpapasya kung aling animation ang i-play at kung paano maayos na lumipat sa pagitan ng mga ito. Ayon sa Rive Engineering (2026), ang average na .riv animation na may State Machine ay tumatagal ng 15 KB — 5–10 beses na mas mababa kaysa sa katumbas na video file.

Rive Runtime ay available para sa Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) at React. Ang rendering ay ginagawa sa pamamagitan ng Skia (Flutter/Web), Core Graphics (iOS) o Canvas (Android). Sinusuportahan ng Rive ang animation ng mga hugis (Knob, Slider, Button na may custom na geometry), na nagbibigay-daan sa paglikha ng ganap na na-animate na mga UI component, hindi lamang mga decorative animation.

Rive vs Lottie: paghahambing ng mga diskarte

Rive at Lottie ay lumulutas ng iba't ibang gawain. Ang Lottie ay isang player para sa mga handa na animation mula sa After Effects, pinakamainam para sa mga passive decorative effect. Ang Rive ay isang tool para sa paglikha ng mga interactive na animation na may sariling lohika, kung saan ang animation ay tumutugon sa mga aksyon ng user. Ang pagpili ay depende sa kinakailangang antas ng interaktibidad.

Kailan pumili ng Rive: mga interactive na button na may tugon sa pag-click, mga elemento ng laro (mga karakter na may estado), mga switch na may animation, mga dynamic na icon na tumutugon sa estado. Kailan pumili ng Lottie: mga preloader, likes, welcome screen, accent animation na walang lohika. Para sa mga proyekto sa Flutter, ang Rive ang ginustong pagpipilian salamat sa native na pagsasama sa Skia at Flutter rendering pipeline.

Pagsasama ng Rive sa Flutter (Dart)

Sa Flutter RiveAnimation — ang pangunahing widget para sa pag-embed ng .riv file. Ito ay available sa pamamagitan ng rive package (opisyal). Sinusuportahan ng RiveAnimation ang mga argumento: artboard (pagpili ng board), animation (pangalan ng animation), fit, alignment, controllers (para sa State Machine). Para sa mga interactive na eksena, ginagamit ang StateMachineController.

import 'package:rive/rive.dart';

// Simpleng pag-playback ng animation
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController na may mga trigger
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');
          }
        },
      ),
    );
  }
}

Mga pinakamahusay na kasanayan sa Flutter: i-load ang .riv file nang asynchronous sa pamamagitan ng RiveAnimation.asset (built-in na AssetBundle). Para sa ListView gumamit ng isang StateMachineController na ibinabahagi sa pagitan ng mga elemento. Ang Rive ay hindi na nangangailangan ng hiwalay na import — ang rive v0.12+ ay may kasamang lahat ng function. Para sa custom na animation, direktang kontrolin ang RiveAnimationController — nagbibigay ito ng access sa mga animation, blend at bilis.

Pagsasama ng Rive sa iOS (Swift)

Sa iOS RiveRuntime ay kinakatawan ng klase na RiveView (UIKit) at RiveViewModel (SwiftUI). Ang library ay konektado sa pamamagitan ng Swift Package Manager. Ang RiveView ay nagre-render ng .riv file sa pamamagitan ng Core Graphics at Metal, sumusuporta sa 120 FPS sa ProMotion display. Para sa State Machine, ginagamit ang RiveStateMachineLayer na may pagkakabit sa mga trigger.

import RiveRuntime

// SwiftUI: RiveViewModel na may animation
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
                            // Trigger sa pamamagitan ng State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView na may manu-manong kontrol
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// Pamamahala ng State Machine
riveView.triggerInput(named: "startAnimation")

Mga pinakamahusay na kasanayan sa iOS: gamitin ang RiveViewModel para sa SwiftUI — awtomatiko nitong pinamamahalaan ang lifecycle. Para sa UIKit, mag-subscribe sa RiveViewDelegate para sa pagsubaybay sa mga event. Ang Rive ay kumokonsumo ng mas kaunting CPU kaysa sa Lottie sa iOS salamat sa rendering sa pamamagitan ng Core Graphics. Para sa mga animation sa NavigationView/UICollectionView gumamit ng prefetching sa pamamagitan ng RiveFile.preload().

Pagsasama ng Rive sa Android (Kotlin)

Sa Android RiveAnimationView — ang pangunahing View para sa pag-embed ng .riv animation. Ang library na app.rive:rive-android ay konektado sa pamamagitan ng Gradle. Ang RiveAnimationView ay nagmana ng View at nagre-render sa pamamagitan ng Canvas na may suporta sa Hardware Acceleration. Ang State Machine ay pinamamahalaan sa pamamagitan ng setTriggers at 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: pamamahala ng State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Pagpapadala ng trigger sa State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Pag-handle ng pagkumpleto ng animation
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Mga pinakamahusay na kasanayan sa Android: i-load ang .riv file sa pamamagitan ng res/raw (built-in na resources) o assets (pag-load sa network). Awtomatikong pinangangasiwaan ng RiveAnimationView ang lifecycle — huwag manu-manong tawagan ang play/pause sa onResume/onPause. Para sa mga animation sa RecyclerView gumamit ng setOnScrollListener para i-pause ang playback habang nag-scroll. Ayon sa dokumentasyon ng Rive (2026), ang .riv file hanggang 100 KB ay na-parse sa loob ng 5–10 ms sa mid-range na device.

State Machine: lohika ng transition sa Rive

State Machine — ang pangunahing kakayahan ng Rive na nagbubukod dito mula sa mga passive animation format. Ito ay isang visual na graph kung saan ang mga vertex ay mga estado (animation) at ang mga gilid ay mga transition na na-activate ng mga trigger. Ang State Machine ay ginagawa sa Rive Editor: ang designer ay nagdaragdag ng mga animation node, ikinokonekta ang mga ito sa mga linya at nagtatalaga ng mga trigger (Touch, Boolean, Number). Ang kailangan lang gawin ng developer ay ipadala ang mga trigger na ito mula sa code.

// Flutter: buong kontrol sa 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');
        },
      ),
    );
  }
}

// Pagpapadala ng numerikong halaga
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Mga uri ng trigger: Boolean — switch (true/false), Number — numerikong halaga (0.0–1.0 o arbitrary range), Trigger — isang beses na impulse (pagpindot ng button). Sa Rive Editor maaari mong i-configure ang smoothing ng transition (Transition Duration) — inirerekomendang halaga 100–300 ms para sa kinis. Para sa mga kumplikadong UI state gumamit ng nested State Machine (Nested State Machines) — bawat bahagi ng animation ay pinamamahalaan nang independyente. Ang Rive State Machine ay gumagana sa lahat ng platform nang walang pagbabago sa .riv file — ang lohika ng transition ay naka-embed sa file, hindi sa code ng application.