Интеграция Rive-анимаций в мобильное приложение

Интеграция Rive-анимаций в мобильное приложение

Rive отличается от Lottie принципиально: это не экспорт «запечённой» анимации, а runtime-движок с State Machine. Анимация реагирует на входные данные из кода — нажатие кнопки меняет состояние State Machine, которая плавно переходит между анимационными клипами. Это мощно и требует понимания того, как Rive Runtime работает внутри приложения.

Архитектура Rive Runtime

Rive файл (.riv) содержит артборды, анимационные клипы и State Machine. Runtime загружает файл, создаёт Artboard инстанс и управляет им через StateMachineController или SimpleAnimation. Рендеринг — через собственный Rive Renderer, который на iOS использует Metal, на Android — OpenGL ES 3.0 / Vulkan.

Важный момент: Rive Renderer и стандартный Canvas рендерер существуют параллельно. На Android до версии runtime 9.x по умолчанию использовался Canvas рендерер — медленнее, но совместимее. Начиная с 9.x Rive Renderer включён по умолчанию, и он значительно быстрее на сложных mesh анимациях, но требует OpenGL ES 3.0 (API 18+, что покрывает >99% устройств).

Интеграция на Android

// build.gradle
implementation "app.rive:rive-android:9.6.0"

// Инициализация в Application.onCreate() - обязательно!
RiveInitializer.initializer(context)

// В layout XML:
// <app.rive.runtime.kotlin.RiveAnimationView
//     android:id="@+id/riveView"
//     app:riveResource="@raw/my_animation"
//     app:riveStateMachineName="StateMachine" />

// В Activity/Fragment:
val riveView = findViewById<RiveAnimationView>(R.id.riveView)
// Передаём input в State Machine:
riveView.setNumberState("StateMachine", "progress", 0.75f)
riveView.setBooleanState("StateMachine", "isActive", true)
riveView.fireState("StateMachine", "triggerName")

RiveInitializer.initializer() должен вызываться один раз до создания любого RiveAnimationView — иначе краш с IllegalStateException: Rive not initialized. Частая ошибка при lazy инициализации DI фреймворков.

Интеграция на iOS

// SPM: https://github.com/rive-app/rive-ios, версия 6.x
import RiveRuntime

let riveView = RiveView()
let model = RiveModel(fileName: "my_animation")
let viewModel = RiveViewModel(model, stateMachineName: "StateMachine")
viewModel.setView(riveView)

// Управление State Machine:
try? viewModel.setInput("isActive", value: true)
try? viewModel.setInput("progress", value: 0.75)
try? viewModel.triggerInput("tapTrigger")

Для SwiftUI используем RiveViewModel как ObservableObject:

struct AnimatedButton: View {
    @StateObject private var rvm = RiveViewModel(fileName: "button_animation",
                                                  stateMachineName: "ButtonSM")
    var body: some View {
        rvm.view()
            .onTapGesture { try? rvm.triggerInput("pressed") }
    }
}

Flutter

// pubspec.yaml: rive: ^0.13.0
import 'package:rive/rive.dart';

RiveAnimation.asset(
  'assets/animations/my_animation.riv',
  stateMachines: ['StateMachine'],
  onInit: (artboard) {
    final controller = StateMachineController.fromArtboard(artboard, 'StateMachine');
    artboard.addController(controller!);
    final isActive = controller.findInput<bool>('isActive') as SMIBool;
    isActive.value = true;
  },
)

Типичные проблемы интеграции

Rive файл создан под один артборд, а в runtime пытаемся обращаться к другому — NullPointerException без внятного сообщения. Всегда явно указывай имя артборда через artboardName параметр.

State Machine input names чувствительны к регистру и пробелам. «Is Active» и «isActive» — разные inputs. Проверяй через Rive Editor перед интеграцией.

Большие .riv файлы (>5 МБ) с embedded растровыми текстурами — загружай асинхронно. На iOS RiveModel можно инициализировать с Data объектом, загруженным в background thread через URLSession или FileManager.

Сроки

Интеграция одного Rive-файла с базовой State Machine — от 4 часов. Если нужна двусторонняя синхронизация между State Machine и бизнес-логикой приложения (прогресс, состояния авторизации, игровые события) — 1–2 дня. Стоимость рассчитывается индивидуально.