Створення Rive-анімацій для інтерактивних елементів у мобільних додатках
Lottie — для відтворення. Rive — для взаємодії. Різниця фундаментальна: Rive State Machine дозволяє кнопці реагувати на натиск, утримання, наведення, відпускання—кожен перехід зі своєю анімацією. Чекбокс анімовано ввімкнувся та вимкнувся, переключатель реагує на 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 + зміна кольору - State:
disabled→ fade to 40% opacity
Переходи між станами керуються Boolean або Trigger inputs. isHovered: Bool, isPressed: Bool. Умови переходу: коли 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 з намальованою галочкою, проміжний стан для indeterminate. Морфінг форми в Rive працює через mesh—межа чекбокса плавно деформується при натиску.
Loading indicator: не просто спіннер, а контекстний: прогрес-бар, який через Number input показує реальний прогрес завантаження. На 100% переходить до success state з celebration animation.
Bottom sheet handle: реагує на drag. З yPosition input, оновлюється в реальному часі через gesture recognizer—ручка розтягується, вказуючи напрямок руху.
Like / Favorite button: idle → pressed (burst effect) → liked state. Trigger tap запускає одноразову burst animation, Boolean isLiked керує кінцевим станом.
Створення в Rive Editor
Працюйте з векторними фігурами безпосередньо в Rive Editor (браузер або desktop beta). Встановіть розмір Artboard точно під розмір елемента—наприклад, 44×44 для кнопки-іконки.
Назвіть анімаційні клипи семантично: idle, press, release, success, error. Кожен клип — окремий timeline. Створіть State Machine в окремій вкладці.
Заявіть inputs заздалегідь і задокументуйте їх: їхні імена будуть використовуватися в коді додатка. Опечатки — це тихі ошибки: 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.