Rive: co to je, nástroj pro animaci pro Flutter a iOS

Co je Rive?

Rive (dříve Rive.app, založeno v roce 2016) — je grafický editor a multiplatformní runtime pro interaktivní vektorovou animaci. Na rozdíl od After Effects + Bodymovin (Lottie) poskytuje Rive jednotné prostředí: designér kreslí, animuje a konfiguruje logiku přechodů přímo v editoru. Výsledek je exportován do binárního souboru .riv o hmotnosti 2 až 50 KB v závislosti na složitosti.

Hlavní rozdíl Rive oproti jiným řešením — State Machine. Jedná se o vizuální graf, kde uzly jsou animace (Idle, Hover, Press, Active) a přechody mezi nimi jsou spouštěny triggery (Touch, Drag, Boolean). Vývojář v kódu pouze odesílá triggery a RiveRuntime sám rozhoduje, kterou animaci přehrát a jak mezi nimi plynule přepínat. Podle Rive Engineering (2026) zabírá průměrná .riv animace se State Machine 15 KB — 5–10krát méně než ekvivalentní video soubor.

Rive Runtime je k dispozici pro Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) a React. Vykreslování probíhá přes Skia (Flutter/Web), Core Graphics (iOS) nebo Canvas (Android). Rive podporuje animaci tvarů (Knob, Slider, Button s vlastní geometrií), což umožňuje vytvářet plně animované UI komponenty, nejen dekorativní animace.

Rive vs Lottie: srovnání přístupů

Rive a Lottie řeší různé úkoly. Lottie je přehrávač pro hotové animace z After Effects, optimální pro pasivní dekorativní efekty. Rive je nástroj pro vytváření interaktivních animací s vlastní logikou, kde animace reaguje na akce uživatele. Volba závisí na požadovaném stupni interaktivity.

Kdy zvolit Rive: interaktivní tlačítka s odezvou na kliknutí, herní prvky (postavy se stavy), přepínače s animací, dynamické ikony reagující na stav. Kdy zvolit Lottie: preloadery, lajky, uvítací obrazovky, akcentní animace bez logiky. Pro projekty na Flutter je Rive preferovanou volbou díky nativní integraci se Skiou a Flutter renderovacím pipeline.

Integrace Rive do Flutter (Dart)

Ve Flutter je RiveAnimation hlavní widget pro vkládání .riv souborů. Je k dispozici přes balíček rive (oficiální). RiveAnimation podporuje argumenty: artboard (výběr desky), animation (název animace), fit, alignment, controllers (pro State Machine). Pro interaktivní scény se používá StateMachineController.

import 'package:rive/rive.dart';

// Jednoduché přehrávání animace
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

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

Nejlepší postupy Flutter: načtěte .riv soubory asynchronně přes RiveAnimation.asset (vestavěný AssetBundle). Pro ListView použijte jeden StateMachineController sdílený mezi prvky. Rive již nevyžaduje samostatný import — rive v0.12+ obsahuje všechny funkce. Pro vlastní animaci ovládejte RiveAnimationController přímo — poskytuje přístup k animacím, míchání (blend) a rychlosti.

Integrace Rive do iOS (Swift)

V iOS je RiveRuntime reprezentován třídou RiveView (UIKit) a RiveViewModel (SwiftUI). Knihovna se připojuje přes Swift Package Manager. RiveView vykresluje .riv soubory přes Core Graphics a Metal a podporuje 120 FPS na ProMotion displejích. Pro State Machine se používá RiveStateMachineLayer s vazbou na triggery.

import RiveRuntime

// SwiftUI: RiveViewModel s animací
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 přes State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView s ručním ovládáním
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// Správa State Machine
riveView.triggerInput(named: "startAnimation")

Nejlepší postupy iOS: použijte RiveViewModel pro SwiftUI — automaticky spravuje životní cyklus. Pro UIKit se přihlaste k odběru RiveViewDelegate pro sledování událostí. Rive spotřebovává méně CPU než Lottie na iOS díky vykreslování přes Core Graphics. Pro animace v NavigationView/UICollectionView použijte přednačítání přes RiveFile.preload().

Integrace Rive do Android (Kotlin)

V Android je RiveAnimationView hlavní View pro vkládání .riv animací. Knihovna app.rive:rive-android se připojuje přes Gradle. RiveAnimationView dědí z View a vykresluje přes Canvas s podporou Hardware Acceleration. State Machine je spravován přes setTriggers a 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: správa State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Odeslání triggeru do State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Zpracování dokončení animace
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Nejlepší postupy Android: načtěte .riv soubory přes res/raw (vestavěné zdroje) nebo assets (načítání přes síť). RiveAnimationView automaticky zpracovává životní cyklus — nevolte play/pause ručně v onResume/onPause. Pro animace v RecyclerView použijte setOnScrollListener pro pozastavení přehrávání při rolování. Podle dokumentace Rive (2026) jsou .riv soubory do 100 KB analyzovány za 5–10 ms na zařízeních střední třídy.

State Machine: logika přechodů v Rive

State Machine — klíčová schopnost Rive, která jej odlišuje od pasivních formátů animace. Jedná se o vizuální graf, kde vrcholy jsou stavy (animace) a hrany jsou přechody aktivované triggery. State Machine se vytváří v Rive Editor: designér přidává uzly animací, spojuje je čarami a přiřazuje triggery (Touch, Boolean, Number). Vývojáři zbývá pouze odesílat tyto triggery z kódu.

// Flutter: plná kontrola nad 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');
        },
      ),
    );
  }
}

// Odeslání číselné hodnoty
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Typy triggerů: Boolean — přepínač (true/false), Number — číselná hodnota (0.0–1.0 nebo libovolný rozsah), Trigger — jednorázový impuls (stisk tlačítka). V Rive Editor lze nakonfigurovat vyhlazení přechodů (Transition Duration) — doporučená hodnota 100–300 ms pro plynulost. Pro složité stavy UI použijte vnořené State Machine (Nested State Machines) — každá část animace je spravována nezávisle. Rive State Machine funguje na všech platformách bez změn v .riv souboru — logika přechodů je vložena do souboru, nikoli do kódu aplikace.