商品规格选择

Rive 中文课程案例 — 商品规格选择交互演示，通过 ViewModel 双向绑定实现实时联动。

这是 Rive 中文课的商品规格选择案例，通过 Rive 的 ViewModel 双向绑定，让网页 UI 和动画内容实时联动。

案例包含两个场景：灯具数量选择 和 盆栽规格切换。

灯具 — 数量选择

选择数量后，Rive 动画中的吊灯会实时响应，同时价格随之联动。动画切换带有 1 秒冷却防抖。

实现要点

数量选择器通过 ViewModel 的 num 属性驱动动画状态：

// 从 ViewModel 获取数值属性
var vmi = r.viewModelInstance;
numProp = vmi.number("num");
 
// 用户点击时更新值
numProp.value = quantity;

数量变化后，动画自动切换到对应状态，价格同步更新。

盆栽 — 规格切换

切换金饭碗 / 铁饭碗规格时，Rive 动画中的盆栽造型实时切换，价格同步更新。还可以勾选礼盒加购选项。

实现要点

规格切换通过 ViewModel 的 style 数值属性驱动，礼盒选项通过 gift 布尔属性控制：

var vmi = r.viewModelInstance;
specProp = vmi.number("style"); // 规格切换
giftProp = vmi.boolean("gift"); // 礼盒勾选
 
// 切换规格
specProp.value = specs[selectedSpec].value;
 
// 勾选礼盒
giftProp.value = isGiftChecked;

价格计算在网页端完成，基础价格 ± 礼盒费用，实时同步到 UI。