Rive: vad är det, animationsverktyg för Flutter och iOS

Vad är Rive?

Rive (tidigare Rive.app, grundat 2016) — är en grafisk redigerare och plattformsoberoende runtime för interaktiv vektoranimation. Till skillnad från After Effects + Bodymovin (Lottie) tillhandahåller Rive en enhetlig miljö: designern ritar, animerar och konfigurerar övergångslogik direkt i redigeraren. Resultatet exporteras till en binär .riv-fil som väger 2 till 50 KB beroende på komplexitet.

Den största skillnaden med Rive jämfört med andra lösningar — State Machine. Det är en visuell graf där noder är animationer (Idle, Hover, Press, Active) och övergångarna mellan dem aktiveras av triggers (Touch, Drag, Boolean). Utvecklaren skickar bara triggers i koden och RiveRuntime bestämmer själv vilken animation som ska spelas och hur man smidigt växlar mellan dem. Enligt Rive Engineering (2026) tar en genomsnittlig .riv-animation med State Machine 15 KB — 5–10 gånger mindre än en motsvarande videofil.

Rive Runtime finns tillgängligt för Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) och React. Rendering sker via Skia (Flutter/Web), Core Graphics (iOS) eller Canvas (Android). Rive stöder formanimation (Knob, Slider, Button med anpassad geometri), vilket möjliggör skapandet av fullt animerade UI-komponenter, inte bara dekorativa animationer.

Rive vs Lottie: jämförelse av tillvägagångssätt

Rive och Lottie löser olika uppgifter. Lottie är en spelare för färdiga animationer från After Effects, optimal för passiva dekorativa effekter. Rive är ett verktyg för att skapa interaktiva animationer med egen logik, där animationen reagerar på användaråtgärder. Valet beror på önskad grad av interaktivitet.

När du väljer Rive: interaktiva knappar med svar på klick, spelelement (karaktärer med tillstånd), växlar med animation, dynamiska ikoner som reagerar på tillstånd. När du väljer Lottie: förladdare, gilla-markeringar, välkomstskärmar, accentanimationer utan logik. För Flutter-projekt är Rive det föredragna valet tack vare native integration med Skia och Fluters renderingspipeline.

Integrering av Rive i Flutter (Dart)

I Flutter är RiveAnimation den huvudsakliga widgeten för att bädda in .riv-filer. Den är tillgänglig via paketet rive (officiellt). RiveAnimation stöder argument: artboard (val av arbetsyta), animation (animationsnamn), fit, alignment, controllers (för State Machine). För interaktiva scener används StateMachineController.

import 'package:rive/rive.dart';

// Enkel uppspelning av animation
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

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

Bästa praxis Flutter: ladda .riv-filer asynkront via RiveAnimation.asset (inbyggd AssetBundle). För ListView, använd en StateMachineController som delas mellan element. Rive kräver inte längre separat import — rive v0.12+ innehåller alla funktioner. För anpassad animation, styr RiveAnimationController direkt — den ger tillgång till animationer, blandning (blend) och hastighet.

Integrering av Rive i iOS (Swift)

I iOS representeras RiveRuntime av klassen RiveView (UIKit) och RiveViewModel (SwiftUI). Biblioteket ansluts via Swift Package Manager. RiveView renderar .riv-filer via Core Graphics och Metal och stöder 120 FPS på ProMotion-skärmar. För State Machine används RiveStateMachineLayer med koppling till triggers.

import RiveRuntime

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

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

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

Bästa praxis iOS: använd RiveViewModel för SwiftUI — den hanterar livscykeln automatiskt. För UIKit, prenumerera på RiveViewDelegate för att spåra händelser. Rive förbrukar mindre CPU än Lottie på iOS tack vare rendering via Core Graphics. För animationer i NavigationView/UICollectionView, använd förhämtning via RiveFile.preload().

Integrering av Rive i Android (Kotlin)

I Android är RiveAnimationView den huvudsakliga vyn för att bädda in .riv-animationer. Biblioteket app.rive:rive-android ansluts via Gradle. RiveAnimationView ärver från View och renderar via Canvas med stöd för Hardware Acceleration. State Machine hanteras via setTriggers och 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-hantering
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

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

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

Bästa praxis Android: ladda .riv-filer via res/raw (inbyggda resurser) eller assets (nätverksladdning). RiveAnimationView hanterar automatiskt livscykeln — anropa inte play/pause manuellt i onResume/onPause. För animationer i RecyclerView, använd setOnScrollListener för att pausa uppspelning vid scrollning. Enligt Rive-dokumentation (2026) analyseras .riv-filer upp till 100 KB på 5–10 ms på medelklass-enheter.

State Machine: övergångslogik i Rive

State Machine — den viktigaste funktionen i Rive som skiljer det från passiva animationsformat. Det är en visuell graf där hörn är tillstånd (animationer) och kanter är övergångar som aktiveras av triggers. State Machine skapas i Rive Editor: designern lägger till animationsnoder, kopplar ihop dem med linjer och tilldelar triggers (Touch, Boolean, Number). Utvecklaren behöver bara skicka dessa triggers från koden.

// Flutter: full kontroll över 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');
        },
      ),
    );
  }
}

// Skicka numeriskt värde
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Triggetyper: Boolean — omkopplare (true/false), Number — numeriskt värde (0.0–1.0 eller godtyckligt intervall), Trigger — engångsimpuls (knapptryckning). I Rive Editor kan du konfigurera utjämning av övergångar (Transition Duration) — rekommenderat värde 100–300 ms för jämnhet. För komplexa UI-tillstånd, använd nästlade State Machines (Nested State Machines) — varje del av animationen hanteras oberoende. Rive State Machine fungerar på alla plattformar utan ändringar i .riv-filen — övergångslogiken är inbäddad i filen, inte i applikationskoden.