目录
- 交互设计
- 交互逻辑图
- 核心实现代码
- 页面状态与核心函数
- 外环拖动：增量累加 + 机械限位
- 中心按钮：圆形命中判定
- 旋转层与涟漪反馈
- 技术要点
- 1. 区域分层与命中判定
- 2. 状态映射机制
- 3. 渐变式颜色反馈
- 工程下载
热水器旋钮不仅需要支持连续的旋转调节（冷热水比例），还包含一个可交互的中心开关按钮。这种设计要求旋钮在处理旋转输入的同时，能够精准识别用户对中心按钮的点击，且互不干扰。
交互设计
旋钮的交互被划分为两个核心区域：
- 外环区域：用于拖动旋转，控制混水比例（-100% 热水至 100% 冷水）。
- 中心区域：独立的开关按钮，支持点击切换状态并伴随涟漪动画反馈。