Rive: ما هو، أداة الرسوم المتحركة لـ Flutter و iOS

ما هو Rive؟

Rive (سابقًا Rive.app، تأسست في 2016) هو محرر رسومي ووقت تشغيل عبر المنصات للرسوم المتحركة المتجهة التفاعلية. على عكس After Effects + Bodymovin (Lottie)، يوفر Rive بيئة موحدة: المصمم يرسم ويحرك ويكوّن منطق الانتقالات مباشرة في المحرر. يتم تصدير النتيجة إلى ملف .riv ثنائي يتراوح وزنه من 2 إلى 50 كيلوبايت حسب التعقيد.

الفرق الرئيسي لـ Rive عن الحلول الأخرى هو State Machine. إنه رسم بياني مرئي حيث العقد هي رسوم متحركة (Idle, Hover, Press, Active)، والانتقالات بينها تُفعّل بواسطة المشغلات (Touch, Drag, Boolean). المطور ببساطة يرسل المشغلات في الكود، و RiveRuntime يقرر أي رسم متحرك يشغله وكيفية التبديل بسلاسة بينها. وفقًا لهندسة Rive (2026)، متوسط رسم متحرك .riv مع State Machine يبلغ 15 كيلوبايت — أقل بـ 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 بهندسة مخصصة)، مما يسمح بإنشاء مكونات واجهة مستخدم متحركة بالكامل، وليس مجرد رسوم متحركة زخرفية.

Rive مقابل Lottie: مقارنة المناهج

Rive و Lottie يحلان مهامًا مختلفة. Lottie هو مشغل للرسوم المتحركة الجاهزة من After Effects، مثالي للتأثيرات الزخرفية السلبية. Rive هو أداة لإنشاء رسوم متحركة تفاعلية بمنطق خاص بها، حيث تتفاعل الرسوم المتحركة مع إجراءات المستخدم. يعتمد الاختيار على مستوى التفاعل المطلوب.

متى تختار Rive: أزرار تفاعلية مع استجابة للضغط، عناصر ألعاب (شخصيات مع حالات)، مفاتيح متحركة، أيقونات ديناميكية تتفاعل مع الحالة. متى تختار Lottie: شاشات التحميل، الإعجابات، شاشات الترحيب، رسوم متحركة مميزة بدون منطق. لمشاريع Flutter، Rive هو الخيار المفضل بفضل التكامل الأصلي مع Skia وخط أنابيب العرض لـ Flutter.

دمج Rive في Flutter (Dart)

في Flutter، RiveAnimation هو الأداة الرئيسية widget لتضمين ملفات .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 مباشرة — يوفر الوصول إلى الرسوم المتحركة والمزج (blend) والسرعة.

دمج Rive في iOS (Swift)

في iOS، RiveRuntime ممثل بفئة RiveView (UIKit) و RiveViewModel (SwiftUI). المكتبة تُوصّل عبر Swift Package Manager. يعرض RiveView ملفات .riv عبر Core Graphics و Metal، ويدعم 120 إطارًا في الثانية على شاشات 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 وحدة معالجة مركزية أقل من Lottie على iOS بفضل العرض عبر Core Graphics. للرسوم المتحركة في NavigationView/UICollectionView، استخدم التحميل المسبق عبر RiveFile.preload().

دمج Rive في Android (Kotlin)

في Android، RiveAnimationView هو العرض الرئيسي لتضمين رسوم متحركة .riv. مكتبة 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 تلقائيًا مع دورة الحياة — لا تستدع play/pause يدويًا في onResume/onPause. للرسوم المتحركة في RecyclerView، استخدم setOnScrollListener لإيقاف التشغيل مؤقتًا أثناء التمرير. وفقًا لوثائق Rive (2026)، ملفات .riv حتى 100 كيلوبايت تُحلل في 5–10 مللي ثانية على أجهزة الفئة المتوسطة.

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 مللي ثانية للسلاسة. للحالات المعقدة لواجهة المستخدم، استخدم State Machines متداخلة (Nested State Machines) — كل جزء من الرسم المتحرك يُدار بشكل مستقل. تعمل State Machine في Rive على جميع المنصات دون تغييرات في ملف .riv — منطق الانتقالات مضمّن في الملف، وليس في كود التطبيق.