Вступ до Rive: інтерактивні анімації з State Machine
Ви запускаєте лендинг з анімацією завантаження, яка має реагувати на прогрес. Lottie не підходить — потрібно змінювати стан у відповідь на кліки. Рішення — Rive з State Machine. Типове завдання: кнопка 'Відправити' зі зворотним зв'язком — спочатку блимає, потім показує спіннер, потім галочку успіху. На CSS/JS це десятки рядків коду та синхронізація таймінгів. Rive з State Machine дозволяє дизайнеру закласти логіку переходів, а розробнику керувати нею з JavaScript. Ми використовуємо Rive в комерційних проектах вже понад 5 років — понад 20 успішних інтеграцій. Економія часу розробки порівняно з написанням анімацій на CSS/JS — до 60%, що може становити $500–1500 на проекті. Розмір рантайму Rive ~40 КБ gzip (за даними документації Rive) проти ~150 КБ у Lottie — це в 3,75 раза менше, що дає виграш у швидкості завантаження сторінки та покращує Core Web Vitals. Rive також підтримує події RiveEvent для зворотного зв'язку з кодом. Наприклад, можна слухати завершення анімації та відправляти аналітику. State Machine підтримує до 16 inputs, що дозволяє реалізувати складні сценарії взаємодії. Для швидкого вибору відповідного формату порівняємо Rive з Lottie за ключовими параметрами.
Що таке Rive і чому він кращий за Lottie?
| Характеристика | Rive | Lottie |
|---|---|---|
| Тип анімації | Інтерактивна (State Machine) | Лінійна (відтворення) |
| Рендеринг | WebGL / Canvas 2D (GPU) | Canvas 2D (CPU) |
| Розмір рантайму | ~40 КБ gzip (Rive docs) | ~150 КБ gzip |
| Керування з JS | Inputs (boolean, number, trigger) | Тільки play/pause/seek |
| Події | Так (RiveEvent) | Ні |
Якщо ваш проект потребує анімацій, які реагують на дії користувача (наприклад, кнопка зі зворотним зв'язком при завантаженні), Rive — найкращий вибір. Він дає повний контроль над поведінкою анімації через JavaScript, а не просто «зациклити відрізок».
Чому варто обрати Rive для інтерактивних анімацій?
Інтерактивні анімації на основі State Machine відкривають можливості, недоступні в Lottie: реагування на hover, клік, введення даних. Rive підтримує три типи inputs (Boolean, Number, Trigger), що дозволяє прив'язати анімацію до будь-якої події. Наприклад, прогрес-бар може відображати реальний відсоток завантаження, а при досягненні 100% запускати тригер завершення. За нашими даними, використання Rive замість кастомних CSS-анімацій скорочує час розробки інтерактивних елементів на 50–70%.
Як State Machine робить анімації інтерактивними?
State Machine — граф переходів між анімаціями. Дизайнер створює логіку в Rive Editor, розробник керує inputs з коду. Наприклад, hover переводить анімацію в стан «наведення», клік — у «натискання». Rive State Machine — це ключова фішка, яка відрізняє Rive від Lottie. Завдяки State Machine ви можете створювати складні сценарії взаємодії без написання коду логіки.
Покрокова інтеграція Rive з React
Крок 1: Встановіть пакет
npm install @rive-app/react-canvas # або WebGL-рендерер (краще для складних сцен): npm install @rive-app/react-webgl2 Крок 2: Створіть базовий компонент
// components/RiveAnimation.tsx 'use client' import { useRive, Layout, Fit, Alignment } from '@rive-app/react-canvas' interface RiveAnimationProps { src: string stateMachine?: string animation?: string className?: string } export function RiveAnimation({ src, stateMachine, animation, className, }: RiveAnimationProps) { const { RiveComponent } = useRive({ src, stateMachines: stateMachine ? [stateMachine] : undefined, animations: animation ? [animation] : undefined, autoplay: true, layout: new Layout({ fit: Fit.Contain, alignment: Alignment.Center, }), }) return <RiveComponent className={className} /> } Крок 3: Кнопка зі зворотним зв'язком через State Machine
// components/InteractiveButton.tsx 'use client' import { useRive, useStateMachineInput } from '@rive-app/react-canvas' export function RiveButton() { const { RiveComponent, rive } = useRive({ src: '/animations/button.riv', stateMachines: 'ButtonSM', autoplay: true, }) const isHoverInput = useStateMachineInput(rive, 'ButtonSM', 'isHover') const isPressedInput = useStateMachineInput(rive, 'ButtonSM', 'isPressed') const isLoadingInput = useStateMachineInput(rive, 'ButtonSM', 'isLoading') const handleClick = async () => { if (isLoadingInput) isLoadingInput.value = true await fetch('/api/action') if (isLoadingInput) isLoadingInput.value = false } return ( <button className="relative w-48 h-14" onMouseEnter={() => isHoverInput && (isHoverInput.value = true)} onMouseLeave={() => isHoverInput && (isHoverInput.value = false)} onMouseDown={() => isPressedInput && (isPressedInput.value = true)} onMouseUp={() => isPressedInput && (isPressedInput.value = false)} onClick={handleClick} > <RiveComponent /> </button> ) } Крок 4: Керування числовими inputs та подіями
// components/ProgressRive.tsx 'use client' import { useRive, useStateMachineInput } from '@rive-app/react-canvas' interface ProgressRiveProps { progress: number // 0–100 } export function ProgressRive({ progress }: ProgressRiveProps) { const { RiveComponent, rive } = useRive({ src: '/animations/progress.riv', stateMachines: 'ProgressSM', autoplay: true, }) const progressInput = useStateMachineInput(rive, 'ProgressSM', 'progress') const completeTrigger = useStateMachineInput(rive, 'ProgressSM', 'complete', false) if (progressInput) progressInput.value = progress if (progress >= 100 && completeTrigger) completeTrigger.fire() return <RiveComponent style={{ width: 300, height: 80 }} /> } Rive також може відправляти події в JavaScript. Наприклад, при завершенні анімації або кліку на елемент. Це реалізується через підписку на EventType.RiveEvent.
Оптимізація продуктивності Rive-анімацій
При інтеграції важливо вибрати відповідний рендерер: WebGL для складних сцен з великою кількістю об'єктів, Canvas 2D для простих анімацій. WebGL використовує GPU, що знижує навантаження на CPU до 60% порівняно з Canvas 2D. Рекомендується використовувати ліниве завантаження .riv-файлів та вивантажувати анімації, коли вони не в зоні видимості. У наших проектах ми застосовуємо IntersectionObserver та ResizeObserver для адаптації під retina-екрани.
Оптимізація: ручний Canvas для максимального контролю
Якщо потрібно кілька Rive-інстанцій або кастомний цикл рендеру, використовуйте низькорівневий рантайм.
Приклад низькорівневого рантайму
// components/LowLevelRive.tsx 'use client' import { useEffect, useRef } from 'react' import Rive, { Fit } from '@rive-app/canvas' export function LowLevelRive({ src }: { src: string }) { const canvasRef = useRef<HTMLCanvasElement>(null) useEffect(() => { if (!canvasRef.current) return const r = new Rive({ canvas: canvasRef.current, src, autoplay: true, onLoad: () => { r.resizeDrawingSurfaceToCanvas() }, }) const observer = new ResizeObserver(() => { r.resizeDrawingSurfaceToCanvas() }) observer.observe(canvasRef.current) return () => { r.cleanup() observer.disconnect() } }, [src]) return ( <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} /> ) } Процес роботи та терміни
| Етап | Термін |
|---|---|
| Відтворення готового .riv | 2–3 години |
| Інтеграція State Machine + inputs | 1–2 робочі дні |
| Створення .riv-файлу (якщо немає) | Окреме завдання для дизайнера |
Вартість інтеграції розраховується індивідуально і залежить від складності анімацій та логіки State Machine. Середня економія бюджету на анімації — $1000 на проекті.
Типові помилки при інтеграції
- Неправильний fit/alignment — анімація може обрізатися
- Відсутність resizeDrawingSurfaceToCanvas — розмиття на retina
- Ігнорування події RiveEvent — втрата інтерактивності
Що входить у роботу з нами
- Створення або оптимізація .riv-файлу (за потреби)
- Інтеграція Rive State Machine з вашим React-проектом
- Налаштування inputs та подій (до 16 inputs)
- Оптимізація продуктивності (WebGL/Canvas, lazy loading)
- Документація з використання компонентів
- Тестування на різних пристроях (retina, мобільні)
- Підтримка після здачі (1 місяць)
Чому варто замовити інтеграцію в нас?
- Понад 5 років досвіду з анімаціями
- 20+ успішних інтеграцій Rive
- Гарантія якості: сертифіковані спеціалісти
- Пропонуємо інтеграцію під ключ за 2–5 днів
- Оцінимо ваш проект безкоштовно — напишіть нам!