Rive: bu nədir, Flutter və iOS üçün animasiya aləti

Rive nədir?

Rive (əvvəl Rive.app, 2016-cı ildə təsis edilib) — interaktiv vektor animasiyası üçün qrafik redaktor və çoxplatformalı icra mühitidir. After Effects + Bodymovin (Lottie)-dən fərqli olaraq, Rive vahid mühit təqdim edir: dizayner birbaşa redaktorda çəkir, animasiya edir və keçid məntiqini konfiqurasiya edir. Nəticə mürəkkəbliyindən asılı olaraq 2–50 KB arasında olan .riv ikili faylına ixrac edilir.

Rive-in digər həllərdən əsas fərqi — State Machine. Bu, qovşaqların animasiyalar (Idle, Hover, Press, Active), keçidlərin isə triggerlər (Touch, Drag, Boolean) ilə işə düşdüyü vizual qrafdır. Tərtibatçı koddan sadəcə triggerlər göndərir, RiveRuntime isə hansı animasiyanı oynatmağı və onlar arasında necə hamar keçid etməyi özü qərar verir. Rive Engineering (2026) məlumatına görə, State Machine ilə orta .riv animasiyası 15 KB tutur — ekvivalent video fayldan 5–10 dəfə az.

Rive Runtime Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) və React üçün mövcuddur. Renderləmə Skia (Flutter/Web), Core Graphics (iOS) və ya Canvas (Android) vasitəsilə həyata keçirilir. Rive formaların animasiyasını (Knob, Slider, fərdi həndəsə ilə Button) dəstəkləyir ki, bu da sadəcə dekorativ animasiyalar deyil, tam animasiyalı UI komponentləri yaratmağa imkan verir.

Rive vs Lottie: yanaşmaların müqayisəsi

Rive və Lottie fərqli vəzifələri həll edir. Lottie — passiv dekorativ effektlər üçün optimal olan After Effects-dən hazır animasiyalar üçün pleyerdir. Rive — animasiyanın istifadəçi hərəkətlərinə reaksiya verdiyi öz məntiqi ilə interaktiv animasiyalar yaratmaq alətidir. Seçim tələb olunan interaktivlik dərəcəsindən asılıdır.

Nə vaxt Rive seçməli: klikə reaksiya verən interaktiv düymələr, oyun elementləri (vəziyyətləri olan personajlar), animasiyalı keçidlər, vəziyyətə reaksiya verən dinamik ikonlar. Nə vaxt Lottie seçməli: preloaderlər, bəyənmələr, qarşılama ekranları, məntiqsiz vurğu animasiyaları. Flutter layihələri üçün Rive — Skia və Flutter renderləmə pipeline ilə nativ inteqrasiya sayəsində üstünlük verilən seçimdir.

Rive-in Flutter-ə inteqrasiyası (Dart)

Flutter-də RiveAnimation — .riv fayllarını yerləşdirmək üçün əsas vidjetdir. rive paketi (rəsmi) vasitəsilə mövcuddur. RiveAnimation arqumentləri dəstəkləyir: artboard (lövhə seçimi), animation (animasiya adı), fit, alignment, controllers (State Machine üçün). İnteraktiv səhnələr üçün StateMachineController istifadə olunur.

import 'package:rive/rive.dart';

// Sadə animasiya oxutma
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController triggerlərlə
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 ən yaxşı təcrübələri: .riv fayllarını RiveAnimation.asset (daxili AssetBundle) vasitəsilə asinxron yükləyin. ListView üçün elementlər arasında paylaşılan bir StateMachineController istifadə edin. Rive artıq ayrıca import tələb etmir — rive v0.12+ bütün funksiyaları ehtiva edir. Fərdi animasiya üçün RiveAnimationController-i birbaşa idarə edin — o, animasiyalara, qarışdırmaya (blend) və sürətə giriş təmin edir.

Rive-in iOS-ə inteqrasiyası (Swift)

iOS-də RiveRuntime RiveView (UIKit) və RiveViewModel (SwiftUI) sinifləri ilə təmsil olunur. Kitabxana Swift Package Manager vasitəsilə qoşulur. RiveView .riv fayllarını Core Graphics və Metal vasitəsilə renderləyir, ProMotion displeylərində 120 FPS dəstəkləyir. State Machine üçün triggerlərə bağlanan RiveStateMachineLayer istifadə olunur.

import RiveRuntime

// SwiftUI: RiveViewModel animasiya ilə
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 vasitəsilə trigger
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView əl ilə idarəetmə
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// State Machine idarəsi
riveView.triggerInput(named: "startAnimation")

iOS ən yaxşı təcrübələri: SwiftUI üçün RiveViewModel istifadə edin — o, həyat dövrünü avtomatik idarə edir. UIKit üçün hadisələri izləmək üçün RiveViewDelegate-ə abunə olun. Rive Core Graphics vasitəsilə renderləmə sayəsində iOS-da Lottie-dən daha az CPU sərf edir. NavigationView/UICollectionView-də animasiyalar üçün RiveFile.preload() vasitəsilə prefetching istifadə edin.

Rive-in Android-ə inteqrasiyası (Kotlin)

Android-də RiveAnimationView — .riv animasiyalarını yerləşdirmək üçün əsas View-dir. app.rive:rive-android kitabxanası Gradle vasitəsilə qoşulur. RiveAnimationView View-dən miras alır və Hardware Acceleration dəstəyi ilə Canvas vasitəsilə renderləyir. State Machine setTriggers və setInputs vasitəsilə idarə olunur.

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

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> State Machine-ə trigger göndərilməsi
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Animasiyanın tamamlanmasının işlənməsi
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Android ən yaxşı təcrübələri: .riv fayllarını res/raw (daxili resurslar) və ya assets (şəbəkə yükləməsi) vasitəsilə yükləyin. RiveAnimationView lifecycle-i avtomatik idarə edir — əl ilə onResume/onPause-da play/pause çağırmayın. RecyclerView-də animasiyalar üçün sürüşdürmə zamanı oxutmanı dayandırmaq üçün setOnScrollListener istifadə edin. Rive sənədlərinə (2026) görə, 100 KB-a qədər .riv faylları orta seqment cihazlarda 5–10 ms-də təhlil edilir.

State Machine: Rive-də keçid məntiqi

State Machine — Rive-in passiv animasiya formatlarından fərqlənən əsas xüsusiyyətidir. Bu, təpələrin vəziyyətlər (animasiyalar), kənarların isə triggerlərlə aktivləşdirilən keçidlər olduğu vizual qrafdır. State Machine Rive Editor-də yaradılır: dizayner animasiya qovşaqları əlavə edir, onları xətlərlə birləşdirir və triggerlər (Touch, Boolean, Number) təyin edir. Tərtibatçıya yalnız bu triggerləri koddan göndərmək qalır.

// Flutter: State Machine üzərində tam nəzarət
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');
        },
      ),
    );
  }
}

// Rəqəm dəyərinin göndərilməsi
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Trigger növləri: Boolean — açar (true/false), Number — ədədi dəyər (0.0–1.0 və ya ixtiyari diapazon), Trigger — birdəfəlik impuls (düymə basılması). Rive Editor-də keçidlərin hamarlanmasını (Transition Duration) konfiqurasiya etmək olar — hamarlıq üçün tövsiyə olunan dəyər 100–300 ms. Mürəkkəb UI vəziyyətləri üçün iç-içə State Machine (Nested State Machines) istifadə edin — animasiyanın hər bir hissəsi müstəqil idarə olunur. Rive State Machine bütün platformalarda .riv faylında dəyişiklik olmadan işləyir — keçid məntiqi tətbiq kodunda deyil, faylda yerləşir.