Интерактивные Rive-анимации на сайте: State Machine в React

Rive-анимации на сайте: State Machine и интеграция

Вы запускаете лендинг с анимацией загрузки, которая должна реагировать на прогресс. Lottie не подходит — нужно менять состояние в ответ на клики. Решение — Rive с State Machine. Типовая задача: кнопка 'Отправить' с обратной связью — сперва мигает, затем показывает спиннер, потом галку успеха. На CSS/JS это десятки строк кода и синхронизация таймингов. Rive с State Machine позволяет дизайнеру заложить логику переходов, а разработчику управлять ею из JavaScript. Мы используем Rive в коммерческих проектах уже несколько лет — более 20 успешных интеграций. Экономия времени разработки по сравнению с написанием анимаций на CSS/JS — до 60%. Размер рантайма Rive ~40 КБ gzip против ~150 КБ у Lottie, что даёт выигрыш в скорости загрузки страницы и улучшает Core Web Vitals. Rive также поддерживает события RiveEvent для обратной связи с кодом. Например, можно слушать завершение анимации и отправлять аналитику. State Machine поддерживает до 16 inputs, что позволяет реализовать сложные сценарии взаимодействия. Для быстрого выбора подходящего формата сравним Rive с Lottie по ключевым параметрам.

Что такое Rive и почему он лучше Lottie?

Если ваш проект требует анимаций, которые реагируют на действия пользователя (например, кнопка с обратной связью при загрузке), 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 переводит анимацию в состояние «наведение», клик — в «нажатие».

npm install @rive-app/react-canvas # или WebGL-рендерер (лучше для сложных сцен): npm install @rive-app/react-webgl2 

Интеграция с React: практические примеры

Базовый компонент

// 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} /> } 

Кнопка с обратной связью через 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> ) } 

Как управлять числовыми inputs?

State Machine поддерживает три типа inputs: Boolean (hover, active), Number (прогресс, скорость), Trigger (одноразовое событие — клик, успех).

// 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. Рекомендуется использовать ленивую загрузку .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%' }} /> ) } 

Процесс работы и сроки

Стоимость интеграции рассчитывается индивидуально и зависит от сложности анимаций и логики State Machine.

Типичные ошибки при интеграции

• Неправильный fit/alignment — анимация может обрезаться
• Отсутствие resizeDrawingSurfaceToCanvas — размытие на retina
• Игнорирование события RiveEvent — потеря интерактивности

Свяжитесь с нами для оценки вашего проекта — получите консультацию инженера с опытом более 20 интеграций. Закажите интеграцию Rive-анимаций на сайт и сократите время разработки.