概览
Rive 最近的一次重大更新引入了数据绑定 这一全新特性。在此之前，若要在运行时动态修改 Rive 动画中的状态，唯一的途径是通过状态机进行管理。
如果需要实现多套主题颜色的动画效果，状态机 的逻辑往往会变得异常复杂且难以维护。而数据绑定的加入，极大地提升了 Rive 动画的动态性 与可维护性 ，为开发者带来了更高的灵活性和效率。
如上图所示，本文将使用 Rive 数据绑定实现一个在 APP 中非常常见的 Tabbar 切换动画效果，并能适配不同颜色的主题。
数据绑定定义
熟悉 Vue 的同学对数据绑定 与自动更新 的概念一定不会陌生。
“数据绑定”是一种通用的技术，用于将“提供者”（即数据源）与“消费者”（如 UI 元素）建立关联，并保持二者之间的同步。每当数据发生变化时，所有与其绑定的元素都会自动更新，反映出最新的状态。
在 Rive 中，Data Binding（数据绑定） 是一种强大的机制，能够将动画元素与外部数据源或代码逻辑建立响应式连接。设计师可以在编辑器中可视化地定义数据结构，并将这些属性映射到动画表现和交互行为上，从而实现高度动态和可配置的动画效果。
在 Rive 编辑器中的操作
创建视图模型
- 打开 Rive 编辑器，切换到 “Data” 面板
- 点击 “+” 创建新的 View Model，定义名称与属性类型（Number、String、Boolean、Color、Trigger、Enum、Nested Model）
- 为属性设定初始值
绑定源与目标
- 在设计画板中的 artboard 界面选择 vm 和 instance
- 选中某个形状、颜色或者位置，在属性上右键打开 Data Binding 面板，选择要绑定的 View Model 属性，即可将数据源与目标属性（如 fillColor、x、scale 等）建立连接。此后，无论是动画播放还是外部更新，都能保持属性同步
在运行时的使用
获取并操作视图模型
- 在加载 Rive 文件后，使用 Rive 运行时 API 获取视图模型，并保存相关引用：
const initRive = () => {
const layout = new Layout({
fit: Fit.Contain,
alignment: Alignment.Center,
});
const riveFile = new RiveFile({
src: animatedIcon,
});
riveFile.on(EventType.Load, () => {
tabbarData.forEach(({ riveConfig }, i) => {
const rive = new Rive({
canvas: canvas.value[i],
riveFile,
layout,
artboard: riveConfig.name,
stateMachines: [riveConfig.stateMachine],
autoplay: false,
autoBind: true,
});
rive.on(EventType.Load, () => {
// 数据绑定相关逻辑
const ins = rive.viewModelInstance;
const color = ins.color('color');
riveColorList.value[i] = markRaw(color);
// 状态机相关逻辑
rive.stateMachineInputs(riveConfig.stateMachine).forEach((input) => {
if (input.name === 'active') {
riveActive.value[i] = markRaw(input);
input.value = false;
}
});
rive.play();
});
riveInstances.value[i] = rive;
});
});
riveFile.init();
};
- 通过修改 Rive VM，同步系统中的状态到动画中
watchEffect(() => {
riveActive.value.forEach((input, i) => {
const isActive = activeTitle.value === tabbarData[i].title;
const colors: Colors = isActive ? primaryColor.value : [50, 50, 51];
// 数据绑定，状态同步
riveColorList.value[i].rgb(...colors);
// 状态机
input.value = isActive;
});
});
总结
预览地址：stackblitz.com/edit/vitejs…
里面包含了 Rive 工程文件和运行时文件，可在 Rive 编辑器中打开查看。
