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) के अनुसार, State Machine के साथ औसत .riv एनिमेशन 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 प्रोजेक्ट्स के लिए, Skia और Flutter की रेंडरिंग पाइपलाइन के साथ मूल एकीकरण के कारण Rive पसंदीदा विकल्प है।

Flutter (Dart) में Rive का एकीकरण

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 को सीधे नियंत्रित करें — यह एनिमेशन, ब्लेंडिंग और गति तक पहुंच प्रदान करता है।

iOS (Swift) में Rive का एकीकरण

iOS पर, RiveRuntime को RiveView क्लास (UIKit) और RiveViewModel (SwiftUI) द्वारा दर्शाया जाता है। लाइब्रेरी Swift Package Manager के माध्यम से जुड़ती है। RiveView Core Graphics और Metal के माध्यम से .riv फ़ाइलों को रेंडर करता है, ProMotion डिस्प्ले पर 120 FPS का समर्थन करता है। 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 सर्वोत्तम अभ्यास: SwiftUI के लिए RiveViewModel का उपयोग करें — यह स्वचालित रूप से जीवनचक्र प्रबंधित करता है। UIKit के लिए, ईवेंट ट्रैकिंग के लिए RiveViewDelegate की सदस्यता लें। Core Graphics रेंडरिंग के कारण Rive iOS पर Lottie की तुलना में कम CPU खपत करता है। NavigationView/UICollectionView में एनिमेशन के लिए, RiveFile.preload() के माध्यम से प्रीफ़ेचिंग का उपयोग करें।

Android (Kotlin) में Rive का एकीकरण

Android पर, RiveAnimationView .riv एनिमेशन एम्बेड करने के लिए मुख्य View है। 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 स्वचालित रूप से जीवनचक्र को संभालता है — onResume/onPause में मैन्युअल रूप से play/pause न कॉल करें। RecyclerView में एनिमेशन के लिए, स्क्रॉल करते समय प्लेबैक को रोकने के लिए setOnScrollListener का उपयोग करें। Rive दस्तावेज़ीकरण (2026) के अनुसार, 100 KB तक की .riv फ़ाइलें मध्य-श्रेणी उपकरणों पर 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 Machines (Nested State Machines) का उपयोग करें — एनिमेशन का प्रत्येक भाग स्वतंत्र रूप से प्रबंधित होता है। Rive State Machine .riv फ़ाइल में बिना बदलाव के सभी प्लेटफ़ॉर्म पर काम करती है — संक्रमण तर्क फ़ाइल में एम्बेडेड होता है, एप्लिकेशन कोड में नहीं।