Стандартна 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 + зміна кольору
- State: disabled → fade до 40% прозорості
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 дає найбільш натуральний відгук.
Отримайте консультацію — ми допоможемо підібрати оптимальну анімацію для вашого додатку. Зв'яжіться з нами для оцінки вашого проєкту.