Создание Rive-анимаций для интерактивных элементов мобильного приложения
Lottie — для проигрывания. Rive — для взаимодействия. Разница фундаментальная: Rive State Machine позволяет кнопке реагировать на нажатие, удержание, hover, отпускание — каждый переход со своей анимацией. Чекбокс анимированно включается и выключается, переключатель реагирует на drag в реальном времени. Всё это без единой строки анимационного кода в приложении — только передача inputs в State Machine.
State Machine как ядро интерактивности
Rive Editor предоставляет State Machine с графическим редактором состояний и переходов. Для интерактивного элемента это выглядит так:
Кнопка с анимацией нажатия:
- State:
idle→ анимация спокойного состояния (может быть idle loop) - State:
hovered→ subtle highlight или scale 1.02 - State:
pressed→ scale down 0.96 + color change - State:
disabled→ fade to 40% opacity
Transitions между состояниями управляются Boolean или Trigger inputs. isHovered: Bool, isPressed: Bool. Transition conditions: когда isHovered = true → переходим в hovered. В runtime приложения при onTouchDown → setInput("isPressed", value: true), при onTouchUp → false.
Переходы в Rive имеют Duration и Easing — анимация перехода встроена в State Machine, не нужно дополнительно настраивать в коде.
Какие элементы делаем в Rive
Toggle/Switch: два состояния с физически-ощущаемой анимацией. Кружок переключателя движется с spring easing, фон меняет цвет. Drag gesture можно смапить на Number input — пользователь буквально тащит переключатель, и анимация следует за пальцем.
Checkbox: checked/unchecked с нарисованной галочкой, intermediate state для indeterminate. Морфинг формы в Rive работает через mesh — граница checkbox плавно деформируется при нажатии.
Loading indicator: не просто спиннер, а contextual: прогресс-бар, который через Number input показывает реальный прогресс загрузки. При 100% — transition в success state с celebration анимацией.
Bottom sheet handle: реагирует на drag. При yPosition input обновляется в реальном времени через gesture recognizer — ручка растягивается, указывая направление движения.
Like / Favourite button: idle → pressed (burst эффект) → liked state. Trigger tap запускает одноразовую анимацию burst, Boolean isLiked управляет конечным состоянием.
Создание в Rive Editor
Работаем с векторными фигурами напрямую в Rive Editor (браузерный, или десктопный beta). Artboard устанавливаем точно под размер элемента — например, 44×44 для кнопки-иконки.
Анимационные клипы называем семантически: idle, press, release, success, error. Каждый клип — отдельный timeline. State Machine создаётся в отдельной вкладке.
Inputs объявляем заранее и документируем: их имена будут использоваться в коде приложения. Опечатка в имени input — молчаливый баг: State Machine не реагирует, но и ошибки не бросает.
Blend States — мощный инструмент для элементов с непрерывным входом. Например, анимация кнопки загрузки с двумя состояниями прогресса: при progress = 0 — одна анимация, при progress = 1 — другая, между ними — плавный blend. Управляется одним Number input.
Экспорт и оптимизация
.riv файл экспортируется из Rive Editor через Export → For runtime. В отличие от Lottie JSON, .riv — бинарный формат, уже оптимизированный. Размеры типичны: простая кнопка — 5–20 КБ, сложный индикатор с несколькими состояниями — 50–150 КБ.
Если в анимации используются растровые текстуры — Rive упаковывает их в .riv. Лучше избегать: используйте векторные формы, runtime будет легче и масштабируемее.
Один .riv файл может содержать несколько артбордов — например, все кнопки приложения в одном файле. Экономит время загрузки, но усложняет обновление отдельных элементов.
Сроки
Создание одного интерактивного элемента в Rive (кнопка, чекбокс, переключатель) со State Machine и 2–4 состояниями: 1–2 дня включая ревью и правки. Полный набор UI-компонентов приложения (5–10 элементов) с согласованной анимационной системой: 3–5 дней. Стоимость рассчитывается индивидуально после оценки числа компонентов и сложности State Machine.