Rive: এটি কী, Flutter এবং iOS-এর জন্য অ্যানিমেশন টুল

Rive কী?

Rive (পূর্বে Rive.app, 2016 সালে প্রতিষ্ঠিত) হল ইন্টারেক্টive ভেক্টর অ্যানিমেশনের জন্য একটি গ্রাফিক্যাল এডিটর এবং ক্রস-প্ল্যাটফর্ম রানটাইম। 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 হল নিজস্ব লজিক-সহ ইন্টারেক্টive অ্যানিমেশন তৈরির টুল, যেখানে অ্যানিমেশন ব্যবহারকারীর ক্রিয়ায় সাড়া দেয়। পছন্দ প্রয়োজনীয় ইন্টারঅ্যাকটিভিটির স্তরের উপর নির্ভর করে।

কখন Rive বেছে নেবেন: চাপলে প্রতিক্রিয়া-সহ ইন্টারেক্টive বাটন, গেম উপাদান (অবস্থা-সহ চরিত্র), অ্যানিমেটেড সুইচ, অবস্থায় প্রতিক্রিয়া জানানো ডায়নামিক আইকন। কখন Lottie বেছে নেবেন: প্রিলোডার, লাইক, স্বাগত স্ক্রিন, লজিক ছাড়া অ্যাকসেন্ট অ্যানিমেশন। Flutter প্রকল্পের জন্য, Skia এবং Flutter-এর রেন্ডারিং পাইপলাইনের সাথে নেটিভ ইন্টিগ্রেশনের কারণে Rive পছন্দের বিকল্প।

Flutter (Dart)-এ Rive সংহতকরণ

Flutter-এ, RiveAnimation হল .riv ফাইল এম্বেড করার জন্য প্রধান উইজেট। এটি rive প্যাকেজ (অফিসিয়াল) এর মাধ্যমে উপলব্ধ। RiveAnimation আর্গুমেন্ট সমর্থন করে: artboard (বোর্ড নির্বাচন), animation (অ্যানিমেশন নাম), fit, alignment, controllers (State Machine-এর জন্য)। ইন্টারেক্টive দৃশ্যের জন্য 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 সেরা অনুশীলন: RiveAnimation.asset (অন্তর্নিহিত AssetBundle) এর মাধ্যমে .riv ফাইল অ্যাসিনক্রোনাসভাবে লোড করুন। তালিকার (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 ফাইলে কোনো পরিবর্তন ছাড়াই সব প্ল্যাটফর্মে কাজ করে — ট্রানজিশন লজিক ফাইলে এম্বেডেড থাকে, অ্যাপ্লিকেশন কোডে নয়।