Реалізація Rive-анімацій на сайті

Реалізація Rive-анімацій на сайті

Rive — інструмент для створення інтерактивних анімацій із State Machine. На відміну від Lottie (лінійне відтворення), Rive-анімації реагують на події: клики, наведення, введення даних, зовнішні тригери. Рантайм легковесний (~40 КБ gzip), рендерить через WebGL або Canvas 2D.

Встановлення

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

State Machine: керування станами

State Machine — головна фішка Rive. Дизайнер створює граф переходів між анімаціями, розробник управляє вхідними параметрами (inputs):

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

  // Отримуємо inputs зі State Machine
  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, visible)
• 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 // це тригер, не boolean
  )

  // Синхронізуємо прогрес при зміні пропса
  if (progressInput) progressInput.value = progress
  if (progress >= 100 && completeTrigger) completeTrigger.fire()

  return <RiveComponent style={{ width: 300, height: 80 }} />
}

Відстеження подій з Rive

Rive може відправляти події назад у JavaScript:

// components/RiveWithEvents.tsx
'use client'
import { useEffect } from 'react'
import { useRive, EventType, RiveEvent } from '@rive-app/react-canvas'

export function RiveWithEvents() {
  const { RiveComponent, rive } = useRive({
    src: '/animations/interactive.riv',
    stateMachines: 'Main',
    autoplay: true,
  })

  useEffect(() => {
    if (!rive) return

    const handler = (event: RiveEvent) => {
      const { name, properties } = event.data as any

      switch (name) {
        case 'ButtonClicked':
          console.log('Rive кнопка натиснута, дані:', properties)
          break
        case 'AnimationComplete':
          console.log('Анімація завершена')
          break
      }
    }

    rive.on(EventType.RiveEvent, handler)
    return () => rive.off(EventType.RiveEvent, handler)
  }, [rive])

  return <RiveComponent style={{ width: 400, height: 300 }} />
}

Оптимізація: ручний 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()
      },
    })

    // Обробка resize
    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-файлу в Rive Editor (якщо немає готового) — окреме завдання для дизайнера/моушн-дизайнера.