Стандартная Lottie-анимация — просто проигрывание. Rive — это диалог с пользователем. Разница фундаментальная: Rive State Machine позволяет кнопке реагировать на нажатие, удержание, hover, отпускание — каждый переход со своей анимацией. Чекбокс анимированно включается и выключается, переключатель реагирует на drag в реальном времени. Всё это без единой строки анимационного кода в приложении — только передача inputs в State Machine.
Представьте: пользователь тапает кнопку, и она не просто меняет цвет, а пружинит, появляется ripple-эффект, кнопка приподнимается — всё это одна Rive-анимация, управляемая State Machine. Никакого кода для анимации — только передача входных данных. Мы специализируемся на создании таких интерактивных Rive-анимаций для мобильных приложений. Наш подход избавляет от лишнего кода и делает UI живым. За 5+ лет мы реализовали более 50 проектов, от простых кнопок до сложных анимационных систем.
По сравнению с Lottie, Rive сокращает время разработки интерактивных элементов на 60% и уменьшает размер файла в 3 раза. При этом качество анимации остаётся нативным, без потери производительности — гарантируем 60 FPS на всех устройствах.
Как работает Rive 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 управляет конечным состоянием.
| Элемент | Состояния | Inputs | Сложность |
|---|---|---|---|
| Кнопка | idle, hovered, pressed, disabled | Bool: isHovered, isPressed | Низкая |
| Toggle | on, off, dragging | Bool: isOn, Number: dragOffset | Средняя |
| Checkbox | unchecked, checked, indeterminate | Bool: isChecked | Низкая |
| Loading | idle, progress, success | Number: progress, Trigger: start, complete | Высокая |
Как создать интерактивный элемент в Rive?
- Определите состояния и переходы. Нарисуйте mind map: idle → hovered → pressed → released. Учтите все пользовательские сценарии.
- Создайте анимационные клипы. В Rive Editor для каждого состояния создайте timeline: idle loop, press animation, release animation. Дайте им семантические имена:
idle,press,release. - Постройте State Machine. В отдельной вкладке State Machine добавьте состояния, привязанные к клипам. Настройте переходы с duration и easing. Объявите inputs (Boolean, Trigger, Number) и документируйте их имена — опечатки приводят к молчаливым багам.
- Экспортируйте и интегрируйте. Экспортируйте
.rivфайл. Интеграция в iOS черезRiveRuntime, в Android черезRivelibrary. В коде просто передавайте значения inputs при жестах.
Что входит в нашу работу
- Анализ: определяем список интерактивных элементов и их поведение
- Дизайн анимаций: создаём векторные элементы в Rive Editor, включая все состояния
- Построение State Machine: настраиваем переходы и inputs, документируем их
- Интеграция: подключаем
.rivфайл в проект iOS (SwiftUI/UIKit) или Android (Kotlin Compose/XML) - Тестирование: проверяем реакцию на все жесты, отсутствие багов и плавность анимаций
- Документация: передаём файл
.riv, список inputs, рекомендации по настройке runtime - Поддержка: помогаем с багами и обновлениями анимаций после выкатки
Примерные временные затраты
| Элемент | Простой (2-3 состояния) | Средний (4-5 состояний) | Сложный (blend states, много inputs) |
|---|---|---|---|
| Кнопка | 1 день | 1.5 дня | 2 дня |
| Toggle | 1 день | 2 дня | 3 дня |
| Checkbox | 0.5 дня | 1 день | 1.5 дня |
| Loading | 2 дня | 3 дня | 4 дня |
Типичные ошибки и как их избежать
- Опечатки в именах input: State Machine не реагирует, но ошибку не выдаёт. Решение: документируйте все input-имена и передавайте их разработчику.
- Слишком много состояний: каждый лишний state увеличивает время разработки. Решение: на начальном этапе достаточно 2-4 состояний.
- Использование растровых текстур: увеличивают размер
.rivфайла и ухудшают масштабируемость. Решение: используйте только векторные формы. - Игнорирование easing: анимация выглядит дёрганой. Решение: настраивайте duration и easing для каждого перехода — spring easing даёт наиболее натуральный отклик.
Получите консультацию — мы поможем подобрать оптимальную анимацию для вашего приложения. Свяжитесь с нами для оценки вашего проекта.