Rive: wat is het, animatietool voor Flutter en iOS

Wat is Rive?

Rive (voorheen Rive.app, opgericht in 2016) — is een grafische editor en cross-platform runtime voor interactieve vectoranimatie. In tegenstelling tot After Effects + Bodymovin (Lottie) biedt Rive een uniforme omgeving: de ontwerper tekent, animeert en configureert de overgangslogica direct in de editor. Het resultaat wordt geëxporteerd naar een binair .riv-bestand dat 2 tot 50 KB weegt, afhankelijk van de complexiteit.

Het belangrijkste verschil van Rive met andere oplossingen — State Machine. Dit is een visuele graaf waarin knooppunten animaties zijn (Idle, Hover, Press, Active) en overgangen ertussen worden geactiveerd door triggers (Touch, Drag, Boolean). De ontwikkelaar stuurt in de code alleen triggers, en RiveRuntime beslist zelf welke animatie wordt afgespeeld en hoe soepel ertussen wordt geschakeld. Volgens Rive Engineering (2026) neemt een gemiddelde .riv-animatie met State Machine 15 KB in beslag — 5–10 keer minder dan een equivalent videobestand.

Rive Runtime is beschikbaar voor Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) en React. Rendering gebeurt via Skia (Flutter/Web), Core Graphics (iOS) of Canvas (Android). Rive ondersteunt vormanimatie (Knob, Slider, Button met aangepaste geometrie), waarmee volledig geanimeerde UI-componenten kunnen worden gemaakt, niet alleen decoratieve animaties.

Rive vs Lottie: vergelijking van aanpakken

Rive en Lottie lossen verschillende taken op. Lottie is een speler voor kant-en-klare animaties uit After Effects, optimaal voor passieve decoratieve effecten. Rive is een tool voor het maken van interactieve animaties met eigen logica, waarbij de animatie reageert op gebruikersacties. De keuze hangt af van de vereiste mate van interactiviteit.

Wanneer Rive kiezen: interactieve knoppen met reactie op klik, game-elementen (personages met toestanden), schakelaars met animatie, dynamische pictogrammen die reageren op status. Wanneer Lottie kiezen: preloaders, likes, welkomstschermen, accentanimaties zonder logica. Voor Flutter-projecten is Rive de voorkeurskeuze dankzij native integratie met Skia en de Flutter-renderingpipeline.

Rive integreren in Flutter (Dart)

In Flutter is RiveAnimation de belangrijkste widget voor het inbedden van .riv-bestanden. Het is beschikbaar via het rive-pakket (officieel). RiveAnimation ondersteunt argumenten: artboard (bord selecteren), animation (animatienaam), fit, alignment, controllers (voor State Machine). Voor interactieve scènes wordt StateMachineController gebruikt.

import 'package:rive/rive.dart';

// Eenvoudig animatie afspelen
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController met triggers
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');
          }
        },
      ),
    );
  }
}

Beste Flutter-praktijken: laad .riv-bestanden asynchroon via RiveAnimation.asset (ingebouwde AssetBundle). Gebruik voor ListView één gedeelde StateMachineController tussen elementen. Rive vereist geen aparte import meer — rive v0.12+ bevat alle functies. Voor aangepaste animatie kunt u RiveAnimationController direct aansturen — het biedt toegang tot animaties, blending en snelheid.

Rive integreren in iOS (Swift)

In iOS wordt RiveRuntime vertegenwoordigd door de klasse RiveView (UIKit) en RiveViewModel (SwiftUI). De bibliotheek wordt verbonden via Swift Package Manager. RiveView rendert .riv-bestanden via Core Graphics en Metal en ondersteunt 120 FPS op ProMotion-schermen. Voor State Machine wordt RiveStateMachineLayer gebruikt met koppeling aan triggers.

import RiveRuntime

// SwiftUI: RiveViewModel met animatie
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 via State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

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

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

Beste iOS-praktijken: gebruik RiveViewModel voor SwiftUI — het beheert automatisch de levenscyclus. Voor UIKit abonneer je op RiveViewDelegate voor het volgen van gebeurtenissen. Rive verbruikt minder CPU dan Lottie op iOS dankzij rendering via Core Graphics. Gebruik voor animaties in NavigationView/UICollectionView prefetching via RiveFile.preload().

Rive integreren in Android (Kotlin)

In Android is RiveAnimationView de belangrijkste View voor het inbedden van .riv-animaties. De bibliotheek app.rive:rive-android wordt via Gradle verbonden. RiveAnimationView erft van View en rendert via Canvas met ondersteuning voor Hardware Acceleration. State Machine wordt beheerd via setTriggers en 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 beheer
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

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

// Afhandeling van animatievoltooiing
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Beste Android-praktijken: laad .riv-bestanden via res/raw (ingebouwde bronnen) of assets (netwerk laden). RiveAnimationView verwerkt automatisch de levenscyclus — roep play/pause niet handmatig aan in onResume/onPause. Gebruik voor animaties in RecyclerView setOnScrollListener om het afspelen te pauzeren tijdens scrollen. Volgens Rive-documentatie (2026) worden .riv-bestanden tot 100 KB in 5–10 ms geparseerd op middenklasse apparaten.

State Machine: overgangslogica in Rive

State Machine — de belangrijkste functie van Rive die het onderscheidt van passieve animatieformaten. Het is een visuele graaf waarin hoekpunten toestanden (animaties) zijn en randen overgangen die door triggers worden geactiveerd. State Machine wordt gemaakt in Rive Editor: de ontwerper voegt animatieknooppunten toe, verbindt ze met lijnen en wijst triggers toe (Touch, Boolean, Number). De ontwikkelaar hoeft alleen deze triggers vanuit de code te sturen.

// Flutter: volledige controle over 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');
        },
      ),
    );
  }
}

// Numerieke waarde verzenden
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Triggertypes: Boolean — schakelaar (true/false), Number — numerieke waarde (0.0–1.0 of willekeurig bereik), Trigger — eenmalige impuls (knop indrukken). In Rive Editor kunt u overgangsvervaging (Transition Duration) configureren — aanbevolen waarde 100–300 ms voor vloeiendheid. Gebruik voor complexe UI-toestanden geneste State Machines (Nested State Machines) — elk deel van de animatie wordt onafhankelijk beheerd. Rive State Machine werkt op alle platforms zonder wijzigingen in het .riv-bestand — de overgangslogica zit in het bestand, niet in de applicatiecode.