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 بمقابلہ 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 کو سبسکرائب کریں۔ Rive Core Graphics رینڈرنگ کی بدولت 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 Machine (Nested State Machines) استعمال کریں — اینیمیشن کا ہر حصہ آزادانہ طور پر منظم ہوتا ہے۔ Rive State Machine .riv فائل میں تبدیلی کے بغیر تمام پلیٹ فارمز پر کام کرتی ہے — منتقلی کی منطق فائل میں ایمبیڈ ہوتی ہے، ایپلیکیشن کوڈ میں نہیں۔