Rive: was es ist, Animationstool für Flutter und iOS

Was ist Rive?

Rive (früher Rive.app, gegründet 2016) ist ein grafischer Editor und plattformübergreifender Runtime für interaktive Vektoranimation. Im Gegensatz zu After Effects + Bodymovin (Lottie) bietet Rive eine einheitliche Umgebung: Der Designer zeichnet, animiert und konfiguriert die Übergangslogik direkt im Editor. Das Ergebnis wird in eine binäre .riv-Datei exportiert, die je nach Komplexität 2 bis 50 KB wiegt.

Der Hauptunterschied von Rive zu anderen Lösungen ist die State Machine. Es ist ein visueller Graph, bei dem Knoten Animationen sind (Idle, Hover, Press, Active) und Übergänge zwischen ihnen durch Trigger (Touch, Drag, Boolean) aktiviert werden. Der Entwickler sendet einfach Trigger im Code, und RiveRuntime entscheidet, welche Animation abgespielt und wie nahtlos zwischen ihnen gewechselt wird. Laut Rive Engineering (2026) benötigt die durchschnittliche .riv-Animation mit State Machine 15 KB — 5–10 Mal weniger als eine äquivalente Videodatei.

Rive Runtime ist für Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) und React verfügbar. Das Rendering erfolgt über Skia (Flutter/Web), Core Graphics (iOS) oder Canvas (Android). Rive unterstützt Formanimation (Knob, Slider, Button mit benutzerdefinierter Geometrie), sodass vollständig animierte UI-Komponenten erstellt werden können, nicht nur dekorative Animationen.

Rive vs Lottie: Vergleich der Ansätze

Rive und Lottie lösen unterschiedliche Aufgaben. Lottie ist ein Player für fertige Animationen aus After Effects, optimal für passive dekorative Effekte. Rive ist ein Tool zum Erstellen interaktiver Animationen mit eigener Logik, bei dem die Animation auf Benutzeraktionen reagiert. Die Wahl hängt vom erforderlichen Interaktivitätsgrad ab.

Wann Rive wählen: interaktive Buttons mit Druckrückmeldung, Spielelemente (Charaktere mit Zuständen), animierte Schalter, dynamische Symbole, die auf Status reagieren. Wann Lottie wählen: Preloader, Likes, Willkommensbildschirme, Akzentanimationen ohne Logik. Für Flutter-Projekte ist Rive aufgrund der nativen Integration mit Skia und der Rendering-Pipeline von Flutter die bevorzugte Wahl.

Integration von Rive in Flutter (Dart)

In Flutter ist RiveAnimation das Haupt-Widget zum Einbetten von .riv-Dateien. Es ist über das rive-Paket (offiziell) verfügbar. RiveAnimation unterstützt Argumente: artboard (Auswahl der Zeichenfläche), animation (Animationsname), fit, alignment, controllers (für State Machine). Für interaktive Szenen wird StateMachineController verwendet.

import 'package:rive/rive.dart';

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

// StateMachineController mit Triggern
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');
          }
        },
      ),
    );
  }
}

Best Practices für Flutter: Laden Sie .riv-Dateien asynchron über RiveAnimation.asset (integriertes AssetBundle). Für Listen (ListView) verwenden Sie einen einzigen StateMachineController, der zwischen Elementen wiederverwendet wird. Rive erfordert keine separaten Importe mehr — rive v0.12+ enthält alle Funktionen. Für benutzerdefinierte Animationen steuern Sie RiveAnimationController direkt — er bietet Zugriff auf Animationen, Mischung (Blend) und Geschwindigkeit.

Integration von Rive in iOS (Swift)

Unter iOS wird RiveRuntime durch die Klasse RiveView (UIKit) und RiveViewModel (SwiftUI) repräsentiert. Die Bibliothek wird über Swift Package Manager eingebunden. RiveView rendert .riv-Dateien über Core Graphics und Metal und unterstützt 120 FPS auf ProMotion-Displays. Für State Machine wird RiveStateMachineLayer mit Trigger-Bindung verwendet.

import RiveRuntime

// SwiftUI: RiveViewModel mit Animation
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 über State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

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

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

Best Practices für iOS: Verwenden Sie RiveViewModel für SwiftUI — es verwaltet automatisch den Lebenszyklus. Für UIKit abonnieren Sie RiveViewDelegate zur Ereignisverfolgung. Rive verbraucht auf iOS weniger CPU als Lottie dank Rendering über Core Graphics. Für Animationen in NavigationView/UICollectionView verwenden Sie Prefetching über RiveFile.preload().

Integration von Rive in Android (Kotlin)

Unter Android ist RiveAnimationView die Haupt-View zum Einbetten von .riv-Animationen. Die Bibliothek app.rive:rive-android wird über Gradle eingebunden. RiveAnimationView erbt von View und rendert über Canvas mit Hardwarebeschleunigungsunterstützung. State Machine wird über setTriggers und setInputs verwaltet.

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

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Senden eines Triggers an die State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

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

Best Practices für Android: Laden Sie .riv-Dateien über res/raw (eingebaute Ressourcen) oder assets (Netzwerkladen). RiveAnimationView verwaltet den Lebenszyklus automatisch — rufen Sie play/pause nicht manuell in onResume/onPause auf. Für Animationen in RecyclerView verwenden Sie setOnScrollListener, um die Wiedergabe während des Scrollens zu pausieren. Laut Rive-Dokumentation (2026) werden .riv-Dateien bis 100 KB auf Mittelklasse-Geräten in 5–10 ms analysiert.

State Machine: Übergangslogik in Rive

State Machine ist eine Schlüsselfunktion von Rive, die es von passiven Animationsformaten unterscheidet. Es ist ein visueller Graph, bei dem Knoten Zustände (Animationen) sind und Kanten Übergänge, die durch Trigger aktiviert werden. Die State Machine wird im Rive Editor erstellt: Der Designer fügt Animationsknoten hinzu, verbindet sie mit Linien und weist Trigger zu (Touch, Boolean, Number). Der Entwickler muss diese Trigger nur aus dem Code senden.

// Flutter: vollständige Kontrolle über 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');
        },
      ),
    );
  }
}

// Senden eines numerischen Werts
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Triggertypen: Boolean — Schalter (true/false), Number — numerischer Wert (0.0–1.0 oder beliebiger Bereich), Trigger — einmaliger Impuls (Tastendruck). Im Rive Editor kann die Übergangsglättung (Transition Duration) konfiguriert werden — empfohlener Wert 100–300 ms für Geschmeidigkeit. Für komplexe UI-Zustände verwenden Sie verschachtelte State Machines (Nested State Machines) — jeder Animationsteil wird unabhängig verwaltet. Die Rive State Machine funktioniert auf allen Plattformen ohne Änderungen an der .riv-Datei — die Übergangslogik ist in der Datei eingebettet, nicht im Anwendungscode.