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's rendering pipeline.

Интеграция 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 используйте prefetching через 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 автоматически обрабатывает lifecycle — не вызывайте 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-файле — логика переходов зашита в файл, а не в код приложения.