Rive: cos'è, strumento di animazione per Flutter e iOS

Cos'è Rive?

Rive (precedentemente Rive.app, fondata nel 2016) è un editor grafico e runtime multipiattaforma per animazione vettoriale interattiva. A differenza di After Effects + Bodymovin (Lottie), Rive fornisce un ambiente unificato: il designer disegna, anima e configura la logica di transizione direttamente nell'editor. Il risultato viene esportato in un file binario .riv che pesa da 2 a 50 KB a seconda della complessità.

La principale differenza di Rive rispetto ad altre soluzioni è State Machine. È un grafico visivo in cui i nodi sono animazioni (Idle, Hover, Press, Active) e le transizioni tra di essi vengono attivate da trigger (Touch, Drag, Boolean). Lo sviluppatore invia semplicemente i trigger nel codice e RiveRuntime decide quale animazione riprodurre e come passare agevolmente da una all'altra. Secondo Rive Engineering (2026), l'animazione .rv media con State Machine occupa 15 KB — da 5 a 10 volte meno di un file video equivalente.

Rive Runtime è disponibile per Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) e React. Il rendering viene effettuato tramite Skia (Flutter/Web), Core Graphics (iOS) o Canvas (Android). Rive supporta l'animazione di forme (Knob, Slider, Button con geometria personalizzata), consentendo di creare componenti dell'interfaccia utente completamente animati, non solo animazioni decorative.

Rive vs Lottie: confronto degli approcci

Rive e Lottie risolvono compiti diversi. Lottie è un lettore per animazioni già pronte da After Effects, ottimale per effetti decorativi passivi. Rive è uno strumento per creare animazioni interattive con logica propria, in cui l'animazione risponde alle azioni dell'utente. La scelta dipende dal livello di interattività richiesto.

Quando scegliere Rive: pulsanti interattivi con feedback alla pressione, elementi di gioco (personaggi con stati), interruttori animati, icone dinamiche che reagiscono allo stato. Quando scegliere Lottie: preloader, mi piace, schermate di benvenuto, animazioni d'accento senza logica. Per i progetti Flutter, Rive è la scelta preferita grazie all'integrazione nativa con Skia e la pipeline di rendering di Flutter.

Integrazione di Rive in Flutter (Dart)

In Flutter, RiveAnimation è il widget principale per incorporare file .riv. È disponibile tramite il pacchetto rive (ufficiale). RiveAnimation supporta argomenti: artboard (selezione del tavolo da disegno), animation (nome dell'animazione), fit, alignment, controllers (per State Machine). Per scene interattive viene utilizzato StateMachineController.

import 'package:rive/rive.dart';

// Riproduzione semplice di animazione
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

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

Buone pratiche Flutter: carica i file .riv in modo asincrono tramite RiveAnimation.asset (AssetBundle incorporato). Per le liste (ListView), utilizza un unico StateMachineController riutilizzato tra gli elementi. Rive non richiede più import separati — rive v0.12+ include tutte le funzionalità. Per animazioni personalizzate, controlla RiveAnimationController direttamente — fornisce accesso ad animazioni, fusione (blend) e velocità.

Integrazione di Rive in iOS (Swift)

Su iOS, RiveRuntime è rappresentato dalla classe RiveView (UIKit) e RiveViewModel (SwiftUI). La libreria viene collegata tramite Swift Package Manager. RiveView esegue il rendering di file .riv tramite Core Graphics e Metal, supportando 120 FPS sui display ProMotion. Per State Machine, viene utilizzato RiveStateMachineLayer con binding dei trigger.

import RiveRuntime

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

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

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

Buone pratiche iOS: utilizza RiveViewModel per SwiftUI — gestisce automaticamente il ciclo di vita. Per UIKit, iscriviti a RiveViewDelegate per il tracciamento degli eventi. Rive consuma meno CPU di Lottie su iOS grazie al rendering tramite Core Graphics. Per animazioni in NavigationView/UICollectionView, utilizza il precaricamento tramite RiveFile.preload().

Integrazione di Rive in Android (Kotlin)

Su Android, RiveAnimationView è la View principale per incorporare animazioni .riv. La libreria app.rive:rive-android viene collegata tramite Gradle. RiveAnimationView eredita da View e renderizza tramite Canvas con supporto all'accelerazione hardware. State Machine viene gestita tramite setTriggers e 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: gestione State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

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

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

Buone pratiche Android: carica i file .riv tramite res/raw (risorse incorporate) o assets (caricamento di rete). RiveAnimationView gestisce automaticamente il ciclo di vita — non chiamare manualmente play/pause in onResume/onPause. Per animazioni in RecyclerView, utilizza setOnScrollListener per mettere in pausa la riproduzione durante lo scorrimento. Secondo la documentazione Rive (2026), i file .riv fino a 100 KB vengono analizzati in 5–10 ms su dispositivi di fascia media.

State Machine: logica delle transizioni in Rive

State Machine è una funzionalità chiave di Rive che lo distingue dai formati di animazione passivi. È un grafico visivo i cui vertici sono stati (animazioni) e gli archi sono transizioni attivate da trigger. State Machine viene creata in Rive Editor: il designer aggiunge nodi di animazione, li collega con linee e assegna trigger (Touch, Boolean, Number). Lo sviluppatore deve solo inviare questi trigger dal codice.

// Flutter: controllo completo su 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');
        },
      ),
    );
  }
}

// Invio di valore numerico
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Tipi di trigger: Boolean — interruttore (true/false), Number — valore numerico (0.0–1.0 o intervallo arbitrario), Trigger — impulso una tantum (pressione del pulsante). In Rive Editor è possibile configurare l'attenuazione della transizione (Transition Duration) — valore consigliato 100–300 ms per fluidità. Per stati dell'interfaccia utente complessi, utilizza State Machine annidate (Nested State Machines) — ogni parte dell'animazione viene gestita indipendentemente. State Machine di Rive funziona su tutte le piattaforme senza modifiche al file .riv — la logica di transizione è incorporata nel file, non nel codice dell'applicazione.