Rive: bu nima, Flutter va iOS uchun animatsiya vositasi

Rive nima?

Rive (avval Rive.app, 2016-da tashkil etilgan) — interaktiv vektor animatsiyasi uchun grafik muharrir va ko'p platformali ish vaqti muhitidir. After Effects + Bodymovin (Lottie) dan farqli o'laroq, Rive yagona muhitni taqdim etadi: dizayner to'g'ridan-to'g'ri muharrirda chizadi, animatsiya qiladi va o'tish mantig'ini sozlaydi. Natija murakkabligiga qarab 2 dan 50 KB gacha bo'lgan .riv ikkilik fayliga eksport qilinadi.

Rive ning boshqa yechimlardan asosiy farqi — State Machine. Bu vizual graf bo'lib, tugunlar animatsiyalar (Idle, Hover, Press, Active) va ular orasidagi o'tishlar triggerlar (Touch, Drag, Boolean) orqali faollashtiriladi. Dasturchi koddan faqat triggerlarni yuboradi, RiveRuntime esa qaysi animatsiyani ijro etish va ular orasida qanday silliq o'tishni o'zi hal qiladi. Rive Engineering (2026) ma'lumotiga ko'ra, State Machine bilan o'rtacha .riv animatsiyasi 15 KB ni egallaydi — ekvivalent video fayldan 5–10 marta kam.

Rive Runtime Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) va React uchun mavjud. Renderlash Skia (Flutter/Web), Core Graphics (iOS) yoki Canvas (Android) orqali amalga oshiriladi. Rive shakllar animatsiyasini (Knob, Slider, maxsus geometriyali Button) qo'llab-quvvatlaydi, bu shunchaki dekorativ animatsiyalarni emas, balki to'liq animatsiyalangan UI komponentlarini yaratishga imkon beradi.

Rive vs Lottie: yondashuvlarni solishtirish

Rive va Lottie turli vazifalarni hal qiladi. Lottie — passiv dekorativ effektlar uchun optimal bo'lgan After Effects dan tayyor animatsiyalar uchun pleyer. Rive — animatsiya foydalanuvchi harakatlariga reaksiya beradigan o'z mantig'iga ega interaktiv animatsiyalar yaratish vositasidir. Tanlov talab qilinadigan interaktivlik darajasiga bog'liq.

Qachon Rive tanlash: bosishga reaksiya beradigan interaktiv tugmalar, o'yin elementlari (holatli personajlar), animatsiyali kalitlar, holatga reaksiya beradigan dinamik belgilar. Qachon Lottie tanlash: preloaderlar, like'lar, xush kelibsiz ekranlari, mantiqsiz urg'u animatsiyalari. Flutter loyihalari uchun Rive — Skia va Flutter renderlash quvuri bilan native integratsiya tufayli afzal tanlovdir.

Rive-ni Flutter-ga integratsiyalash (Dart)

Flutter-da RiveAnimation — .riv fayllarini joylashtirish uchun asosiy vidjetdir. rive paketi (rasmiy) orqali mavjud. RiveAnimation argumentlarni qo'llab-quvvatlaydi: artboard (taxta tanlash), animation (animatsiya nomi), fit, alignment, controllers (State Machine uchun). Interaktiv sahnalar uchun StateMachineController ishlatiladi.

import 'package:rive/rive.dart';

// Animatsiyani oddiy ijro etish
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController triggerlar bilan
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 eng yaxshi amaliyotlari: .riv fayllarini RiveAnimation.asset (ichki AssetBundle) orqali asinxron yuklang. ListView uchun elementlar o'rtasida taqsimlangan bitta StateMachineController dan foydalaning. Rive endi alohida import talab qilmaydi — rive v0.12+ barcha funksiyalarni o'z ichiga oladi. Maxsus animatsiya uchun RiveAnimationController ni to'g'ridan-to'g'ri boshqaring — u animatsiyalar, aralashtirish (blend) va tezlikka kirishni ta'minlaydi.

Rive-ni iOS-ga integratsiyalash (Swift)

iOS da RiveRuntime RiveView (UIKit) va RiveViewModel (SwiftUI) sinflari bilan ifodalanadi. Kutubxona Swift Package Manager orqali ulanadi. RiveView .riv fayllarini Core Graphics va Metal orqali renderlaydi, ProMotion displeylarida 120 FPS qo'llab-quvvatlaydi. State Machine uchun triggerlarga bog'langan RiveStateMachineLayer ishlatiladi.

import RiveRuntime

// SwiftUI: RiveViewModel animatsiya bilan
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 orqali trigger
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView qo'lda boshqaruv
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// State Machine boshqaruvi
riveView.triggerInput(named: "startAnimation")

iOS eng yaxshi amaliyotlari: SwiftUI uchun RiveViewModel dan foydalaning — u hayot aylanishini avtomatik boshqaradi. UIKit uchun hodisalarni kuzatish uchun RiveViewDelegate ga obuna bo'ling. Rive Core Graphics orqali renderlash tufayli iOS da Lottie dan kamroq CPU sarflaydi. NavigationView/UICollectionView dagi animatsiyalar uchun RiveFile.preload() orqali oldindan yuklashdan foydalaning.

Rive-ni Android-ga integratsiyalash (Kotlin)

Android da RiveAnimationView — .riv animatsiyalarini joylashtirish uchun asosiy View. app.rive:rive-android kutubxonasi Gradle orqali ulanadi. RiveAnimationView View dan meros oladi va Hardware Acceleration qo'llab-quvvatlashi bilan Canvas orqali renderlaydi. State Machine setTriggers va setInputs orqali boshqariladi.

// 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 boshqaruvi
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> State Machine ga trigger yuborish
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Animatsiya tugashini qayta ishlash
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Android eng yaxshi amaliyotlari: .riv fayllarini res/raw (ichki resurslar) yoki assets (tarmoq orqali yuklash) orqali yuklang. RiveAnimationView hayot aylanishini avtomatik boshqaradi — onResume/onPause da qo'lda play/pause chaqirmang. RecyclerView dagi animatsiyalar uchun aylantirish vaqtida ijroni to'xtatish uchun setOnScrollListener dan foydalaning. Rive hujjatlariga (2026) ko'ra, 100 KB gacha .riv fayllari o'rta segment qurilmalarida 5–10 ms da tahlil qilinadi.

State Machine: Rive-da o'tish mantig'i

State Machine — Rive-ni passiv animatsiya formatlaridan ajratib turadigan asosiy xususiyatdir. Bu vizual graf bo'lib, uchlari holatlar (animatsiyalar) va qirralari triggerlar bilan faollashtiriladigan o'tishlardir. State Machine Rive Editor da yaratiladi: dizayner animatsiya tugunlarini qo'shadi, ularni chiziqlar bilan bog'laydi va triggerlarni (Touch, Boolean, Number) tayinlaydi. Dasturchiga faqat bu triggerlarni koddan yuborish qoladi.

// Flutter: State Machine ustidan to'liq nazorat
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');
        },
      ),
    );
  }
}

// Raqamli qiymatni yuborish
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Trigger turlari: Boolean — kalit (true/false), Number — raqamli qiymat (0.0–1.0 yoki ixtiyoriy diapazon), Trigger — bir martalik impuls (tugma bosilishi). Rive Editor da o'tishlarning silliqlashtirishini (Transition Duration) sozlash mumkin — silliqlik uchun tavsiya etilgan qiymat 100–300 ms. Murakkab UI holatlari uchun ichki State Machine (Nested State Machines) dan foydalaning — animatsiyaning har bir qismi mustaqil boshqariladi. Rive State Machine barcha platformalarda .riv faylida o'zgarishsiz ishlaydi — o'tish mantig'i ilova kodida emas, balki faylda joylashgan.