交互按钮动画

Rive 按钮动画预览

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

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

HTML 结构

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

Rive 运行时初始化

new rive.Rive({
  src: "./learnrivebutton.riv",
  stateMachines: "State Machine 1",
  autoplay: true,
  canvas: document.getElementById("rive-canvas"),
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas()
  },
})

关键配置说明

• stateMachines: 状态机名称，用于驱动交互状态
• automaticallyHandleEvents: 自动处理悬停、点击等交互事件