Rive: що це таке, інструмент анімації для Flutter та iOS

Що таке Rive?

Rive (раніше Rive.app, заснована в 2016) — це графічний редактор та крос-платформовий рантайм для інтерактивної векторної анімації. На відміну від After Effects + Bodymovin (Lottie), Rive надає єдине середовище: дизайнер малює, анімує та налаштовує логіку переходів прямо в редакторі. Результат експортується в бінарний файл .riv, який важить від 2 до 50 КБ залежно від складності.

Головна відмінність Rive від інших рішень — State Machine. Це візуальний граф, де вузли — це анімації (Idle, Hover, Press, Active), а переходи між ними спрацьовують по тригерах (Touch, Drag, Boolean). Розробник у коді просто надсилає тригери, а RiveRuntime сам вирішує, яку анімацію відтворювати та як плавно переключитися між ними. За даними Rive Engineering (2026), середня .riv-анімація з State Machine займає 15 КБ — у 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 — кращий вибір завдяки нативній інтеграції з 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 — основний View для вбудовування .riv-анімацій. Бібліотека app.rive:rive-android підключається через Gradle. RiveAnimationView успадковується від View і рендерить через Canvas з підтримкою апаратного прискорення. 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 КБ парсяться за 5–10 мс на пристроях середнього сегмента.

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 мс для плавності. Для складних UI-станів використовуйте вкладені State Machine (Nested State Machines) — кожна частина анімації керується незалежно. State Machine Rive працює на всіх платформах без змін у .riv-файлі — логіка переходів зашита у файл, а не в код додатку.