Rive: шта је то, алатка за анимацију за Flutter и iOS

Шта је Rive?

Rive (раније Rive.app, основан 2016) — графички едитор и вишеплатформски рантим за интерактивну векторску анимацију. За разлику од After Effects + Bodymovin (Lottie), Rive пружа јединствено окружење: дизајнер црта, анимира и конфигурише логику прелаза директно у едитору. Резултат се извози у бинарну .riv датотеку која тежи између 2 и 50 KB у зависности од сложености.

Главна разлика Rive у односу на друга решења — State Machine. То је визуелни граф где су чворови анимације (Idle, Hover, Press, Active), а прелази између њих се активирају окидачима (Touch, Drag, Boolean). Програмер у коду само шаље окидаче, а RiveRuntime сам одлучује коју анимацију да репродукује и како да глатко пређе између њих. Према Rive Engineering (2026), просечна .riv анимација са State Machine заузима 15 KB — 5–10 пута мање од еквивалентног видео фајла.

Rive Runtime је доступан за Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) и React. Рендеровање се врши путем Skia (Flutter/Web), Core Graphics (iOS) или Canvas (Android). Rive подржава анимацију облика (Knob, Slider, Button са прилагођеном геометријом), што омогућава креирање потпуно анимираних UI компоненти, а не само декоративних анимација.

Rive vs Lottie: поређење приступа

Rive и Lottie решавају различите задатке. Lottie је плејер за готове анимације из After Effects-а, оптималан за пасивне декоративне ефекте. Rive је алат за креирање интерактивних анимација са сопственом логиком, где анимација реагује на радње корисника. Избор зависи од потребног степена интерактивности.

Када изабрати Rive: интерактивна дугмад са реакцијом на клик, елементи игара (ликови са стањима), прекидачи са анимацијом, динамичке иконе које реагују на стање. Када изабрати Lottie: прелоадери, лајкови, добродошли екрани, акцентне анимације без логике. За пројекте на Flutter-у, Rive је пожељан избор захваљујући native интеграцији са Skia и Flutter-овим рендеровањем.

Интеграција Rive у Flutter (Dart)

На Flutter-у RiveAnimation — главни виџет за уграђивање .riv датотека. Доступан је путем пакета rive (званични). RiveAnimation подржава аргументе: artboard (избор табле), animation (име анимације), fit, alignment, controllers (за State Machine). За интерактивне сцене користи се StateMachineController.

import 'package:rive/rive.dart';

// Једноставна репродукција анимације
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController са окидачима
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');
          }
        },
      ),
    );
  }
}

Најбоље праксе Flutter: учитавајте .riv датотеке асинхроно путем RiveAnimation.asset (уграђени AssetBundle). За ListView користите један StateMachineController дељен између елемената. Rive више не захтева посебан import — rive v0.12+ укључује све функције. За прилагођену анимацију контролишите RiveAnimationController директно — пружа приступ анимацијама, мешању (blend) и брзини.

Интеграција Rive у iOS (Swift)

На iOS-у RiveRuntime је представљен класом RiveView (UIKit) и RiveViewModel (SwiftUI). Библиотека се повезује путем Swift Package Manager-а. RiveView рендерује .riv датотеке путем Core Graphics и Metal-а, подржавајући 120 FPS на ProMotion екранима. За State Machine користи се RiveStateMachineLayer са везивањем за окидаче.

import RiveRuntime

// SwiftUI: RiveViewModel са анимацијом
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
                            // Окидач кроз State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView са ручним управљањем
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// Управљање State Machine
riveView.triggerInput(named: "startAnimation")

Најбоље праксе iOS: користите RiveViewModel за SwiftUI — аутоматски управља животним циклусом. За UIKit претплатите се на RiveViewDelegate за праћење догађаја. Rive троши мање CPU-а од Lottie-ја на iOS-у захваљујући рендеровању путем Core Graphics. За анимације у NavigationView/UICollectionView користите преузимање унапред путем RiveFile.preload().

Интеграција Rive у Android (Kotlin)

На Android-у RiveAnimationView — главни View за уграђивање .riv анимација. Библиотека app.rive:rive-android се повезује путем Gradle-а. RiveAnimationView наслеђује View и рендерује путем Canvas-а са подршком за Hardware Acceleration. State Machine се управља путем setTriggers и 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
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Отправка триггера в State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Обрада завршетка анимације
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Најбоље праксе Android: учитавајте .riv датотеке путем res/raw (уграђени ресурси) или assets (учитавање преко мреже). RiveAnimationView аутоматски обрађује животни циклус — не позивајте play/pause у onResume/onPause ручно. За анимације у RecyclerView користите setOnScrollListener за паузирање репродукције приликом скроловања. Према Rive документацији (2026), .riv датотеке до 100 KB се парсирају за 5–10 ms на уређајима средњег сегмента.

State Machine: логика прелаза у Rive-у

State Machine — кључна могућност Rive-а која га разликује од пасивних формата анимације. То је визуелни граф где су врхови стања (анимације), а ивице прелази активирани окидачима. State Machine се креира у Rive Editor-у: дизајнер додаје чворове анимација, повезује их линијама и додељује окидаче (Touch, Boolean, Number). Програмеру остаје само да шаље ове окидаче из кода.

// Flutter: потпуна контрола над 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');
        },
      ),
    );
  }
}

// Слање нумеричке вредности
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Типови окидача: Boolean — прекидач (true/false), Number — нумеричка вредност (0.0–1.0 или произвољан опсег), Trigger — једнократни импулс (притисак дугмета). У Rive Editor-у се може подесити заглађивање прелаза (Transition Duration) — препоручена вредност 100–300 ms за глаткоћу. За сложена UI стања користите угњеждене State Machine (Nested State Machines) — сваки део анимације се управља независно. Rive State Machine ради на свим платформама без промена у .riv датотеци — логика прелаза је уграђена у датотеку, а не у код апликације.