rive 是做什么的？
检查日期 2026-10：@rive-app/canvas 2.45，@rive-app/react-canvas 4.37，@remotion/rive 4.0。
.riv 文件通过 Rive 编辑器（rive.app）制作。代码可以播放和控制它们，但无法创作它们。请向用户索取文件，或使用来自 Rive 市场的社区文件。
包
| 需求 | 包 |
|---|---|
| 原生 JavaScript，推荐 | @rive-app/webgl2 |
| 原生 JavaScript，Canvas2D | @rive-app/canvas（若无文本、布局、脚本、音频，用 @rive-app/canvas-lite） |
| React | @rive-app/react-webgl2 或 @rive-app/react-canvas |
| Remotion | @remotion/rive |
原生
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 了解其属性）。等待点击/悬停的交互式状态机逻辑在渲染时不会运行；请设计一个带有时间线动画的 .riv 文件用于视频用途。