交互按钮预览

在网页中嵌入并预览一个 Rive 交互按钮动画。

这是一个 Rive 中文课的多状态按钮案例，支持悬停和点击交互：

下载 .riv 源文件

你可以下载这个 Rive 动画的源文件，用于学习和参考：

开发实现方式

1. HTML 结构

<canvas id="rive-canvas"></canvas>

2. Rive 运行时初始化

const r = new rive.Rive({
  src: "./learnrivebutton.riv",
  canvas: canvas,
  stateMachines: "State Machine 1",
  autoplay: true,
  autoBind: true,
  automaticallyHandleEvents: true,
  dispatchPointerExit: true,
  layout: new rive.Layout({
    fit: rive.Fit.Contain,
    alignment: rive.Alignment.Center,
  }),
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();
  },
});

3. 关键配置说明

配置项	说明
`src`	Rive 动画文件路径
`stateMachines`	状态机名称，用于驱动交互状态
`autoplay`	页面加载时自动播放
`automaticallyHandleEvents`	自动处理悬停、点击等交互事件
`dispatchPointerExit`	精确检测鼠标离开状态
`layout.fit`	动画在画布中的填充方式
`layout.alignment`	动画对齐方式