Rive: mi ez, animációs eszköz Flutter és iOS rendszerekhez

Mi az a Rive?

Rive (korábban Rive.app, alapítva 2016-ban) — egy grafikus szerkesztő és többplatformos futásidejű környezet interaktív vektoranimációhoz. Az After Effects + Bodymovin (Lottie) rendszerekkel ellentétben a Rive egységes környezetet biztosít: a tervező közvetlenül a szerkesztőben rajzol, animál és konfigurálja az átmenetek logikáját. Az eredmény egy .riv bináris fájlba kerül exportálásra, amely a komplexitástól függően 2–50 KB méretű.

A Rive fő különbsége más megoldásoktól — a State Machine. Ez egy vizuális gráf, ahol a csomópontok animációk (Idle, Hover, Press, Active), a köztük lévő átmenetek pedig triggerek (Touch, Drag, Boolean) által aktiválódnak. A fejlesztő a kódban csak triggereket küld, a RiveRuntime pedig maga dönti el, melyik animációt játssza le, és hogyan váltson közöttük simán. A Rive Engineering (2026) szerint egy átlagos .riv animáció State Machine-nel 15 KB-ot foglal — 5–10-szer kevesebbet, mint egy megfelelő videofájl.

Rive Runtime elérhető Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) és React rendszerekhez. A renderelés Skia (Flutter/Web), Core Graphics (iOS) vagy Canvas (Android) segítségével történik. A Rive támogatja a formák animációját (Knob, Slider, Button egyedi geometriával), ami lehetővé teszi teljesen animált UI-komponensek létrehozását, nem csak dekoratív animációkét.

Rive vs Lottie: megközelítések összehasonlítása

Rive és Lottie különböző feladatokat old meg. A Lottie egy lejátszó kész animációkhoz az After Effects-ből, optimális passzív dekoratív effektekhez. A Rive egy eszköz interaktív animációk létrehozására saját logikával, ahol az animáció reagál a felhasználói műveletekre. A választás a szükséges interaktivitás mértékétől függ.

Mikor válassza a Rive-ot: interaktív gombok kattintásra reagálással, játékelemek (karakterek állapotokkal), kapcsolók animációval, dinamikus ikonok, amelyek reagálnak az állapotra. Mikor válassza a Lottie-t: előtöltők, like-ok, üdvözlő képernyők, akcentus animációk logika nélkül. Flutter projektekhez a Rive az előnyben részesített választás a Skia-val és a Flutter renderelési csővezetékkel való natív integrációnak köszönhetően.

A Rive integrálása Flutterbe (Dart)

Flutterben a RiveAnimation a fő widget .riv fájlok beágyazásához. A rive csomagon (hivatalos) keresztül érhető el. A RiveAnimation támogatja az argumentumokat: artboard (tábla kiválasztása), animation (animáció neve), fit, alignment, controllers (State Machine-hez). Interaktív jelenetekhez a StateMachineController használatos.

import 'package:rive/rive.dart';

// Egyszerű animáció lejátszás
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController triggerekkel
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 legjobb gyakorlatok: töltse be a .riv fájlokat aszinkron módon a RiveAnimation.asset (beépített AssetBundle) segítségével. ListView esetén használjon egyetlen, az elemek között megosztott StateMachineController-t. A Rive már nem igényel külön importálást — a rive v0.12+ minden funkciót tartalmaz. Egyedi animációhoz közvetlenül vezérelje a RiveAnimationController-t — hozzáférést biztosít az animációkhoz, keveréshez (blend) és sebességhez.

A Rive integrálása iOS-be (Swift)

iOS-en a RiveRuntime a RiveView (UIKit) és RiveViewModel (SwiftUI) osztályokkal jelenik meg. A könyvtár a Swift Package Manager segítségével csatlakozik. A RiveView a .riv fájlokat Core Graphics és Metal segítségével rendereli, támogatva a 120 FPS-t a ProMotion kijelzőkön. A State Machine-hez a RiveStateMachineLayer használatos triggerekhez kötéssel.

import RiveRuntime

// SwiftUI: RiveViewModel animációval
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
                            // Trigger State Machine-en keresztül
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView kézi vezérléssel
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// State Machine kezelés
riveView.triggerInput(named: "startAnimation")

iOS legjobb gyakorlatok: használja a RiveViewModel-et SwiftUI-hoz — automatikusan kezeli az életciklust. UIKit esetén iratkozzon fel a RiveViewDelegate-re az események követéséhez. A Rive kevesebb CPU-t fogyaszt, mint a Lottie iOS-en a Core Graphics-on keresztüli renderelésnek köszönhetően. A NavigationView/UICollectionView animációihoz használjon előzetes betöltést (prefetching) a RiveFile.preload() segítségével.

A Rive integrálása Androidba (Kotlin)

Androidon a RiveAnimationView a fő View .riv animációk beágyazásához. Az app.rive:rive-android könyvtár Gradle segítségével csatlakozik. A RiveAnimationView a View-ból származik és Canvas segítségével renderel Hardware Acceleration támogatással. A State Machine a setTriggers és setInputs segítségével vezérelhető.

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

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Trigger küldése a State Machine-nek
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Animáció befejezésének kezelése
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Android legjobb gyakorlatok: töltse be a .riv fájlokat res/raw (beépített erőforrások) vagy assets (hálózati betöltés) segítségével. A RiveAnimationView automatikusan kezeli az életciklust — ne hívja manuálisan a play/pause-t onResume/onPause-ban. RecyclerView animációihoz használja a setOnScrollListener-t a lejátszás szüneteltetéséhez görgetéskor. A Rive dokumentáció (2026) szerint a 100 KB-ig terjedő .riv fájlok 5–10 ms alatt elemződnek középkategóriás eszközökön.

State Machine: átmenetek logikája a Rive-ban

State Machine — a Rive kulcsképessége, amely megkülönbözteti a passzív animációs formátumoktól. Ez egy vizuális gráf, ahol a csúcsok állapotok (animációk), az élek pedig triggerek által aktivált átmenetek. A State Machine a Rive Editor-ban készül: a tervező animációs csomópontokat ad hozzá, vonalakkal köti össze őket, és triggereket (Touch, Boolean, Number) rendel hozzájuk. A fejlesztőnek csak ezeket a triggereket kell elküldenie a kódból.

// Flutter: teljes kontroll a State Machine felett
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');
        },
      ),
    );
  }
}

// Numerikus érték küldése
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Trigger típusok: Boolean — kapcsoló (true/false), Number — numerikus érték (0.0–1.0 vagy tetszőleges tartomány), Trigger — egyszeri impulzus (gombnyomás). A Rive Editor-ban konfigurálható az átmenetek simítása (Transition Duration) — ajánlott érték 100–300 ms a simaságért. Összetett UI állapotokhoz használjon beágyazott State Machine-eket (Nested State Machines) — az animáció minden része függetlenül kezelhető. A Rive State Machine minden platformon működik a .riv fájl módosítása nélkül — az átmenetek logikája a fájlba van ágyazva, nem az alkalmazás kódjában.