Rive: چیست، ابزار انیمیشن برای Flutter و iOS

Rive چیست؟

Rive (قبلاً Rive.app، تأسیس شده در ۲۰۱۶) — یک ویرایشگر گرافیکی و محیط اجرای چندپلتفرمی برای انیمیشن برداری تعاملی است. برخلاف After Effects + Bodymovin (Lottie)، Rive یک محیط یکپارچه ارائه می‌دهد: طراح مستقیماً در ویرایشگر ترسیم، انیمیشن و منطق انتقال را پیکربندی می‌کند. نتیجه به یک فایل باینری .riv صادر می‌شود که بسته به پیچیدگی ۲ تا ۵۰ کیلوبایت وزن دارد.

تفاوت اصلی Rive با سایر راه‌حل‌ها — State Machine است. این یک گراف بصری است که در آن گره‌ها انیمیشن‌ها (Idle, Hover, Press, Active) هستند و انتقال بین آنها توسط محرک‌ها (Touch, Drag, Boolean) فعال می‌شوند. توسعه‌دهنده در کد فقط محرک‌ها را ارسال می‌کند و RiveRuntime خودش تصمیم می‌گیرد کدام انیمیشن را پخش کند و چگونه بین آنها به نرمی سوئیچ کند. به گفته Rive Engineering (2026)، یک انیمیشن .riv متوسط با State Machine ۱۵ کیلوبایت حجم دارد — ۵ تا ۱۰ برابر کمتر از فایل ویدیویی معادل.

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، 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 دیگر به import جداگانه نیاز ندارد — rive v0.12+ شامل همه ویژگی‌ها است. برای انیمیشن سفارشی، RiveAnimationController را مستقیماً کنترل کنید — دسترسی به انیمیشن‌ها، ترکیب (blend) و سرعت را فراهم می‌کند.

ادغام Rive در iOS (Swift)

در iOS RiveRuntime توسط کلاس RiveView (UIKit) و RiveViewModel (SwiftUI) نمایش داده می‌شود. کتابخانه از طریق Swift Package Manager متصل می‌شود. RiveView فایل‌های .riv را از طریق Core Graphics و Metal رندر می‌کند و از ۱۲۰ 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 به دلیل رندرینگ از طریق Core Graphics CPU کمتری نسبت به Lottie در iOS مصرف می‌کند. برای انیمیشن‌ها در NavigationView/UICollectionView از پیش واکشی از طریق RiveFile.preload() استفاده کنید.

ادغام Rive در Android (Kotlin)

در Android RiveAnimationView View اصلی برای جاسازی انیمیشن‌های .riv است. کتابخانه app.rive:rive-android از طریق Gradle متصل می‌شود. RiveAnimationView از View ارث‌بری می‌کند و از طریق Canvas با پشتیبانی از Hardware Acceleration رندر می‌کند. 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 تا ۱۰۰ کیلوبایت در ۵ تا ۱۰ میلی‌ثانیه در دستگاه‌های میان‌رده تجزیه می‌شوند.

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) را پیکربندی کرد — مقدار توصیه‌شده ۱۰۰ تا ۳۰۰ میلی‌ثانیه برای نرمی. برای حالت‌های پیچیده UI از State Machine تودرتو (Nested State Machines) استفاده کنید — هر بخش از انیمیشن به طور مستقل مدیریت می‌شود. State Machine Rive در همه پلتفرم‌ها بدون تغییر در فایل .riv کار می‌کند — منطق انتقال در فایل جاسازی شده است، نه در کد برنامه.