Повний гайд: інтерактивні Rive-анімації та State Machine в React

npm install @rive-app/react-canvas # або WebGL-рендерер (краще для складних сцен): npm install @rive-app/react-webgl2 

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

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

// 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%' }} />
  )
}

Процес роботи та терміни

Вартість інтеграції розраховується індивідуально і залежить від складності анімацій та логіки 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 днів
• Оцінимо ваш проект — напишіть нам!

Поширені запитання