Rive: ce este, instrument de animație pentru Flutter și iOS

Ce este Rive?

Rive (anterior Rive.app, fondată în 2016) — este un editor grafic și runtime cross-platform pentru animație vectorială interactivă. Spre deosebire de After Effects + Bodymovin (Lottie), Rive oferă un mediu unificat: designerul desenează, animează și configurează logica tranzițiilor direct în editor. Rezultatul este exportat într-un fișier binar .riv care cântărește între 2 și 50 KB în funcție de complexitate.

Principala diferență a Rive față de alte soluții — State Machine. Este un graf vizual, unde nodurile sunt animații (Idle, Hover, Press, Active), iar tranzițiile dintre ele sunt declanșate de triggere (Touch, Drag, Boolean). Dezvoltatorul din cod trimite doar declanșatoare, iar RiveRuntime decide singur ce animație să redea și cum să comute lin între ele. Conform Rive Engineering (2026), o animație .riv medie cu State Machine ocupă 15 KB — de 5–10 ori mai puțin decât un fișier video echivalent.

Rive Runtime este disponibil pentru Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) și React. Randarea se face prin Skia (Flutter/Web), Core Graphics (iOS) sau Canvas (Android). Rive acceptă animația formelor (Knob, Slider, Button cu geometrie personalizată), ceea ce permite crearea de componente UI complet animate, nu doar animații decorative.

Rive vs Lottie: compararea abordărilor

Rive și Lottie rezolvă sarcini diferite. Lottie este un player pentru animații gata făcute din After Effects, optim pentru efecte decorative pasive. Rive este un instrument pentru crearea de animații interactive cu logică proprie, unde animația reacționează la acțiunile utilizatorului. Alegerea depinde de gradul necesar de interactivitate.

Când să alegeți Rive: butoane interactive cu reacție la clic, elemente de joc (personaje cu stări), comutatoare cu animație, pictograme dinamice care reacționează la stare. Când să alegeți Lottie: preîncărcătoare, like-uri, ecrane de bun venit, animații de accent fără logică. Pentru proiectele pe Flutter, Rive este alegerea preferată datorită integrării native cu Skia și pipeline-ul de randare Flutter.

Integrarea Rive în Flutter (Dart)

Pe Flutter RiveAnimation — widgetul principal pentru încorporarea fișierelor .riv. Este disponibil prin pachetul rive (oficial). RiveAnimation acceptă argumentele: artboard (selectarea planșei), animation (numele animației), fit, alignment, controllers (pentru State Machine). Pentru scene interactive se folosește StateMachineController.

import 'package:rive/rive.dart';

// Redare simplă a animației
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController cu declanșatoare
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');
          }
        },
      ),
    );
  }
}

Cele mai bune practici Flutter: încărcați fișierele .riv asincron prin RiveAnimation.asset (AssetBundle încorporat). Pentru ListView utilizați un singur StateMachineController partajat între elemente. Rive nu mai necesită import separat — rive v0.12+ include toate funcțiile. Pentru animație personalizată, controlați RiveAnimationController direct — oferă acces la animații, amestecare (blend) și viteză.

Integrarea Rive în iOS (Swift)

Pe iOS RiveRuntime este reprezentat de clasa RiveView (UIKit) și RiveViewModel (SwiftUI). Biblioteca se conectează prin Swift Package Manager. RiveView redă fișierele .riv prin Core Graphics și Metal, suportând 120 FPS pe display-urile ProMotion. Pentru State Machine se folosește RiveStateMachineLayer cu legare la declanșatoare.

import RiveRuntime

// SwiftUI: RiveViewModel cu animație
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
                            // Declanșator prin State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView cu control manual
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

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

Cele mai bune practici iOS: utilizați RiveViewModel pentru SwiftUI — gestionează automat ciclul de viață. Pentru UIKit, abonați-vă la RiveViewDelegate pentru urmărirea evenimentelor. Rive consumă mai puțin CPU decât Lottie pe iOS datorită randării prin Core Graphics. Pentru animații în NavigationView/UICollectionView utilizați prefetching prin RiveFile.preload().

Integrarea Rive în Android (Kotlin)

Pe Android RiveAnimationView — View principal pentru încorporarea animațiilor .riv. Biblioteca app.rive:rive-android se conectează prin Gradle. RiveAnimationView moștenește View și redă prin Canvas cu suport Hardware Acceleration. State Machine este gestionat prin setTriggers și 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: gestionare State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

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

// Manipularea finalizării animației
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Cele mai bune practici Android: încărcați fișierele .riv prin res/raw (resurse încorporate) sau assets (încărcare prin rețea). RiveAnimationView gestionează automat ciclul de viață — nu apelați play/pause manual în onResume/onPause. Pentru animații în RecyclerView utilizați setOnScrollListener pentru pauză la derulare. Conform documentației Rive (2026), fișierele .riv de până la 100 KB sunt parse în 5–10 ms pe dispozitive de segment mediu.

State Machine: logica tranzițiilor în Rive

State Machine — capacitatea cheie a Rive care îl diferențiază de formatele pasive de animație. Este un graf vizual, unde vârfurile sunt stări (animații), iar muchiile sunt tranziții activate de declanșatoare. State Machine se creează în Rive Editor: designerul adaugă noduri de animație, le conectează cu linii și atribuie declanșatoare (Touch, Boolean, Number). Dezvoltatorului îi rămâne doar să trimită aceste declanșatoare din cod.

// Flutter: control complet asupra 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');
        },
      ),
    );
  }
}

// Trimiterea valorii numerice
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Tipuri de declanșatoare: Boolean — comutator (true/false), Number — valoare numerică (0.0–1.0 sau interval arbitrar), Trigger — impuls unic (apăsare buton). În Rive Editor se poate configura netezirea tranzițiilor (Transition Duration) — valoare recomandată 100–300 ms pentru finețe. Pentru stări UI complexe utilizați State Machine imbricate (Nested State Machines) — fiecare parte a animației este gestionată independent. State Machine Rive funcționează pe toate platformele fără modificări în fișierul .riv — logica tranzițiilor este încorporată în fișier, nu în codul aplicației.