Rive: qué es, herramienta de animación para Flutter y iOS

¿Qué es Rive?

Rive (anteriormente Rive.app, fundada en 2016) es un editor gráfico y runtime multiplataforma para animación vectorial interactiva. A diferencia de After Effects + Bodymovin (Lottie), Rive proporciona un entorno unificado: el diseñador dibuja, anima y configura la lógica de transiciones directamente en el editor. El resultado se exporta a un archivo binario .riv que pesa de 2 a 50 KB según la complejidad.

La principal diferencia de Rive frente a otras soluciones es State Machine. Es un grafo visual donde los nodos son animaciones (Idle, Hover, Press, Active), y las transiciones entre ellos se activan mediante disparadores (Touch, Drag, Boolean). El desarrollador simplemente envía disparadores en el código, y RiveRuntime decide qué animación reproducir y cómo cambiar suavemente entre ellas. Según Rive Engineering (2026), la animación .riv promedio con State Machine ocupa 15 KB — de 5 a 10 veces menos que un archivo de video equivalente.

Rive Runtime está disponible para Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) y React. El renderizado se realiza mediante Skia (Flutter/Web), Core Graphics (iOS) o Canvas (Android). Rive admite animación de formas (Knob, Slider, Button con geometría personalizada), lo que permite crear componentes de UI completamente animados, no solo animaciones decorativas.

Rive vs Lottie: comparación de enfoques

Rive y Lottie resuelven diferentes problemas. Lottie es un reproductor de animaciones listas de After Effects, óptimo para efectos decorativos pasivos. Rive es una herramienta para crear animaciones interactivas con lógica propia, donde la animación responde a las acciones del usuario. La elección depende del nivel de interactividad requerido.

Cuándo elegir Rive: botones interactivos con respuesta al presionar, elementos de juego (personajes con estados), interruptores animados, iconos dinámicos que reaccionan al estado. Cuándo elegir Lottie: preloaders, me gusta, pantallas de bienvenida, animaciones de acento sin lógica. Para proyectos Flutter, Rive es la opción preferida gracias a la integración nativa con Skia y el pipeline de renderizado de Flutter.

Integración de Rive en Flutter (Dart)

En Flutter, RiveAnimation es el widget principal para incrustar archivos .riv. Está disponible a través del paquete rive (oficial). RiveAnimation admite argumentos: artboard (selección de mesa), animation (nombre de la animación), fit, alignment, controllers (para State Machine). Para escenas interactivas se utiliza StateMachineController.

import 'package:rive/rive.dart';

// Reproducción simple de animación
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

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

Mejores prácticas en Flutter: cargue archivos .riv de forma asíncrona mediante RiveAnimation.asset (AssetBundle incorporado). Para listas (ListView), utilice un solo StateMachineController reutilizado entre elementos. Rive ya no requiere importaciones separadas — rive v0.12+ incluye todas las funciones. Para animaciones personalizadas, controle RiveAnimationController directamente — proporciona acceso a animaciones, mezcla (blend) y velocidad.

Integración de Rive en iOS (Swift)

En iOS, RiveRuntime está representado por la clase RiveView (UIKit) y RiveViewModel (SwiftUI). La biblioteca se conecta a través de Swift Package Manager. RiveView renderiza archivos .riv mediante Core Graphics y Metal, compatible con 120 FPS en pantallas ProMotion. Para State Machine se utiliza RiveStateMachineLayer con vinculación a disparadores.

import RiveRuntime

// SwiftUI: RiveViewModel con animación
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
                            // Disparador mediante State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

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

// Gestión de State Machine
riveView.triggerInput(named: "startAnimation")

Mejores prácticas en iOS: use RiveViewModel para SwiftUI — gestiona automáticamente el ciclo de vida. Para UIKit, suscríbase a RiveViewDelegate para el seguimiento de eventos. Rive consume menos CPU que Lottie en iOS gracias al renderizado mediante Core Graphics. Para animaciones en NavigationView/UICollectionView, use la precarga mediante RiveFile.preload().

Integración de Rive en Android (Kotlin)

En Android, RiveAnimationView es la Vista principal para incrustar animaciones .riv. La biblioteca app.rive:rive-android se conecta mediante Gradle. RiveAnimationView hereda de View y renderiza mediante Canvas con soporte de aceleración por hardware. State Machine se gestiona mediante setTriggers y 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: gestión 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") "> Envío del disparador a State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Manejo de finalización de animación
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Mejores prácticas en Android: cargue archivos .riv mediante res/raw (recursos incorporados) o assets (carga por red). RiveAnimationView maneja automáticamente el ciclo de vida — no llame a play/pause manualmente en onResume/onPause. Para animaciones en RecyclerView, use setOnScrollListener para pausar la reproducción durante el desplazamiento. Según la documentación de Rive (2026), los archivos .riv de hasta 100 KB se analizan en 5–10 ms en dispositivos de gama media.

State Machine: lógica de transiciones en Rive

State Machine es una característica clave de Rive que lo distingue de los formatos de animación pasivos. Es un grafo visual donde los vértices son estados (animaciones) y las aristas son transiciones activadas por disparadores. State Machine se crea en Rive Editor: el diseñador añade nodos de animación, los conecta con líneas y asigna disparadores (Touch, Boolean, Number). El desarrollador solo necesita enviar estos disparadores desde el código.

// Flutter: control total sobre 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');
        },
      ),
    );
  }
}

// Envío de valor numérico
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Tipos de disparadores: Boolean — interruptor (true/false), Number — valor numérico (0.0–1.0 o rango arbitrario), Trigger — impulso único (presión de botón). En Rive Editor se puede configurar el suavizado de transiciones (Transition Duration) — valor recomendado 100–300 ms para fluidez. Para estados de UI complejos, use State Machines anidadas (Nested State Machines) — cada parte de la animación se gestiona de forma independiente. State Machine de Rive funciona en todas las plataformas sin cambios en el archivo .riv — la lógica de transiciones está incrustada en el archivo, no en el código de la aplicación.