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 JS
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()) 在執行階段類型中已棄用。僅在沒有檢視模型的舊檔案中使用它們。
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="..." /> — 它會與目前影格同步播放檔案（請查閱 remotion-docs 了解其 props）。等待點擊/滑入的互動式狀態機邏輯在渲染時不會執行；請設計一個包含時間軸動畫的 .riv 檔案以用於影片。