rive은(는) 무엇을 하나요?
확인 일자 2026-10: @rive-app/canvas 2.45, @rive-app/react-canvas 4.37, @remotion/rive 4.0.
.riv 파일은 Rive 편집기(rive.app)에서 제작됩니다. 코드로 이를 재생하고 제어할 수 있지만, 직접 제작할 수는 없습니다. 사용자에게 파일을 요청하거나 Rive 마켓플레이스의 커뮤니티 파일을 사용하세요.
패키지
| 필요 항목 | 패키지 |
|---|---|
| Vanilla JS, 권장 | @rive-app/webgl2 |
| Vanilla JS, Canvas2D | @rive-app/canvas (텍스트, 레이아웃, 스크립팅, 오디오가 필요 없으면 @rive-app/canvas-lite) |
| React | @rive-app/react-webgl2 또는 @rive-app/react-canvas |
| Remotion | @remotion/rive |
Vanilla
import { Rive } from '@rive-app/webgl2'
const r = new Rive({
src: '/hero.riv',
canvas: document.getElementById('canvas'),
stateMachines: 'State Machine 1', // 편집기에서의 이름
autoplay: true,
autoBind: true, // 기본 뷰 모델 인스턴스 바인딩
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// 나중에: r.cleanup()
데이터 바인딩 (.riv 파일을 구동하는 현재 방식)
상태 머신 입력(r.stateMachineInputs(name), .value, .fire())은 런타임 타입에서 더 이상 사용되지 않습니다(deprecated). 뷰 모델이 없는 구형 파일에만 사용하세요.
const vmi = r.viewModelInstance // autoBind: true 필요
vmi.number('Progress').value = 0.75
vmi.string('Title').value = 'Hello'
vmi.boolean('Active').value = true
vmi.color('Accent').value = 0xFFFF5500 // ARGB
vmi.enum('Mood').value = 'Happy'
vmi.trigger('Jump').trigger()
vmi.number('Progress').on((e) => console.log(e.data))
React
import { useRive, useViewModel, useViewModelInstance,
useViewModelInstanceNumber, useViewModelInstanceTrigger } from '@rive-app/react-canvas'
const { rive, RiveComponent } = useRive({ src: '/hero.riv', stateMachines: 'State Machine 1', autoplay: true })
const vm = useViewModel(rive)
const vmi = useViewModelInstance(vm, { useDefault: true, rive })
const { setValue: setProgress } = useViewModelInstanceNumber('Progress', vmi)
const { trigger: jump } = useViewModelInstanceTrigger('Jump', vmi)
return <RiveComponent style={{ width: 400, height: 400 }} onClick={jump} />
컨테이너에는 명시적인 크기가 필요합니다. RiveComponent는 부모를 채웁니다.
동영상
Remotion에서는 @remotion/rive의 <RemotionRiveCanvas src="..." />를 사용하세요 — 현재 프레임과 동기화되어 파일을 재생합니다(자세한 props는 remotion 문서를 확인하세요). 클릭/호버를 기다리는 인터랙티브 상태 머신 로직은 렌더링 중에 실행되지 않습니다. 동영상 사용을 위해 .riv 파일을 타임라인 애니메이션으로 설계하세요.