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 срещу Lottie: сравнение на подходите

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

Кога да изберете Rive: интерактивни бутони с реакция на кликване, игрови елементи (персонажи със състояния), ключове с анимация, динамични икони, реагиращи на състояние. Кога да изберете Lottie: прелоудъри, харесвания, екрани за добре дошли, акцентни анимации без логика. За проекти на Flutter, Rive е предпочитаният избор благодарение на родната интеграция със 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 вече не изисква отделен импорт — 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 — основният изглед за вграждане на .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 файла — логиката на преходи е вградена във файла, а не в кода на приложението.