Rive : qu'est-ce que c'est, outil d'animation pour Flutter et iOS

Qu'est-ce que Rive ?

Rive (anciennement Rive.app, fondée en 2016) est un éditeur graphique et un runtime multiplateforme pour l'animation vectorielle interactive. Contrairement à After Effects + Bodymovin (Lottie), Rive fournit un environnement unifié : le dessinateur dessine, anime et configure la logique des transitions directement dans l'éditeur. Le résultat est exporté dans un fichier binaire .riv pesant de 2 à 50 Ko selon la complexité.

La principale différence de Rive par rapport aux autres solutions est la State Machine. C'est un graphe visuel où les nœuds sont des animations (Idle, Hover, Press, Active), et les transitions entre eux sont activées par des déclencheurs (Touch, Drag, Boolean). Le développeur envoie simplement des déclencheurs dans le code, et RiveRuntime décide quelle animation lire et comment basculer en douceur entre elles. Selon Rive Engineering (2026), l'animation .riv moyenne avec State Machine prend 15 Ko — 5 à 10 fois moins qu'un fichier vidéo équivalent.

Rive Runtime est disponible pour Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) et React. Le rendu est effectué via Skia (Flutter/Web), Core Graphics (iOS) ou Canvas (Android). Rive prend en charge l'animation de formes (Knob, Slider, Button avec géométrie personnalisée), permettant de créer des composants d'interface utilisateur entièrement animés, pas seulement des animations décoratives.

Rive vs Lottie : comparaison des approches

Rive et Lottie résolvent des tâches différentes. Lottie est un lecteur d'animations prêtes à l'emploi d'After Effects, optimal pour les effets décoratifs passifs. Rive est un outil pour créer des animations interactives avec sa propre logique, où l'animation répond aux actions de l'utilisateur. Le choix dépend du niveau d'interactivité requis.

Quand choisir Rive : boutons interactifs avec retour de pression, éléments de jeu (personnages avec états), interrupteurs animés, icônes dynamiques réagissant au statut. Quand choisir Lottie : préchargeurs, likes, écrans d'accueil, animations d'accent sans logique. Pour les projets Flutter, Rive est le choix préféré grâce à l'intégration native avec Skia et le pipeline de rendu de Flutter.

Intégration de Rive dans Flutter (Dart)

Dans Flutter, RiveAnimation est le widget principal pour intégrer des fichiers .riv. Il est disponible via le package rive (officiel). RiveAnimation prend en charge les arguments : artboard (sélection de la planche), animation (nom de l'animation), fit, alignment, controllers (pour State Machine). Pour les scènes interactives, StateMachineController est utilisé.

import 'package:rive/rive.dart';

// Lecture simple d'animation
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController avec déclencheurs
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');
          }
        },
      ),
    );
  }
}

Meilleures pratiques Flutter : chargez les fichiers .riv de manière asynchrone via RiveAnimation.asset (AssetBundle intégré). Pour les listes (ListView), utilisez un seul StateMachineController réutilisé entre les éléments. Rive ne nécessite plus d'importations séparées — rive v0.12+ inclut toutes les fonctionnalités. Pour une animation personnalisée, contrôlez RiveAnimationController directement — il fournit un accès aux animations, au mélange (blend) et à la vitesse.

Intégration de Rive dans iOS (Swift)

Sur iOS, RiveRuntime est représenté par la classe RiveView (UIKit) et RiveViewModel (SwiftUI). La bibliothèque est connectée via Swift Package Manager. RiveView rend les fichiers .riv via Core Graphics et Metal, prenant en charge 120 FPS sur les écrans ProMotion. Pour State Machine, RiveStateMachineLayer est utilisé avec liaison de déclencheur.

import RiveRuntime

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

// UIKit : RiveView avec contrôle manuel
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

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

Meilleures pratiques iOS : utilisez RiveViewModel pour SwiftUI — il gère automatiquement le cycle de vie. Pour UIKit, abonnez-vous à RiveViewDelegate pour le suivi des événements. Rive consomme moins de CPU que Lottie sur iOS grâce au rendu via Core Graphics. Pour les animations dans NavigationView/UICollectionView, utilisez le préchargement via RiveFile.preload().

Intégration de Rive dans Android (Kotlin)

Sur Android, RiveAnimationView est la vue principale pour intégrer des animations .riv. La bibliothèque app.rive:rive-android est connectée via Gradle. RiveAnimationView hérite de View et rend via Canvas avec prise en charge de l'accélération matérielle. State Machine est gérée via setTriggers et 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 : gestion de State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Envoi du déclencheur à la State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

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

Meilleures pratiques Android : chargez les fichiers .riv via res/raw (ressources intégrées) ou assets (chargement réseau). RiveAnimationView gère automatiquement le cycle de vie — n'appelez pas play/pause manuellement dans onResume/onPause. Pour les animations dans RecyclerView, utilisez setOnScrollListener pour mettre en pause la lecture pendant le défilement. Selon la documentation Rive (2026), les fichiers .riv jusqu'à 100 Ko sont analysés en 5 à 10 ms sur les appareils de milieu de gamme.

State Machine : logique des transitions dans Rive

State Machine est une fonctionnalité clé de Rive qui le distingue des formats d'animation passifs. C'est un graphe visuel dont les sommets sont des états (animations) et les arêtes sont des transitions activées par des déclencheurs. La State Machine est créée dans Rive Editor : le concepteur ajoute des nœuds d'animation, les relie avec des lignes et attribue des déclencheurs (Touch, Boolean, Number). Le développeur n'a qu'à envoyer ces déclencheurs depuis le code.

// Flutter : contrôle total sur 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');
        },
      ),
    );
  }
}

// Envoi de valeur numérique
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Types de déclencheurs : Boolean — interrupteur (true/false), Number — valeur numérique (0,0–1,0 ou plage arbitraire), Trigger — impulsion unique (pression de bouton). Dans Rive Editor, vous pouvez configurer le lissage des transitions (Transition Duration) — valeur recommandée 100–300 ms pour la fluidité. Pour les états d'interface utilisateur complexes, utilisez des State Machines imbriquées (Nested State Machines) — chaque partie de l'animation est gérée indépendamment. La State Machine Rive fonctionne sur toutes les plateformes sans modification du fichier .riv — la logique de transition est intégrée dans le fichier, pas dans le code de l'application.