Rive Animation

让动画可以交互

背景：Rive是一个矢量图形编辑器，用于创建动画。其editor服务设计师，runtime服务开发，通过input、trigger、text、events使动画可交互。

---

一、初始化

const instance = new Rive({
      //指定画布
      canvas,
      //加载动画文件
      src: 'assets/your.riv',
      //指定状态机
      stateMachines: "State Machine 1",
      //是否自动播放
      autoplay: true,
      //画布布局
      layout: new Layout({
            fit: Fit.Cover,
            alignment: Alignment.BottomLeft,
      }),
})

二、Artboards（画布）

1. rive中至少包含一个画布

2. 可以通过artboard切换画布

三、Animations（动画）

1. 需要播放的动画

2. 可以通过instance.play指定要播放的动画

   instance.play('Blink')

   

四、StateMachine（状态机）

1. 将动画连接在一起，并定义切换条件

2. 可以通过stateMachines切换状态机

   

五、Inputs（StateMachine的输入）

1. 与StateMachine交互，切换动画状态

   

2. 类型

   trigger：通过input.fire()触发

   number：通过input.value=value触发

   boolean：通过input.value=true触发

3. 可以通过stateMachineInputs获取到inputs

   instance.on('load', () => {
      console.log('load')
      const inputs = instance.stateMachineInputs('State Machine 1')
      const input = inputs[0]
      console.log('input', input)
   })

六、Text（修改动画中的文本）

1. 获取：

   const text = instance.getTextRunValue('title')

2. 设置

   instance.setTextRunValue('title', 'Hello World')

七、Events（自定义事件）

1. 在riv里定义好事件someEvent

   //通过on监听
   instance.on('someEvent', () => {})

八、Rive的本质

rive文档是一段json，通过runtime解析，将其画在canvas上，这样事件的响应，传参，文本绘制一切就顺理成章了