118 lines
4.5 KiB
Markdown
118 lines
4.5 KiB
Markdown
# 握力环训练趣味化：捏碎特效 + 卡路里统计
|
||
|
||
## Goal
|
||
|
||
为握力环训练增加趣味性和成就感，通过视觉特效（捏碎物品）和数据反馈（卡路里消耗）提升用户训练动力。
|
||
|
||
## What I already know
|
||
|
||
**当前握力环训练实现：**
|
||
- 基础动画：绿色圆环缩放（scale 1 → 0.65）
|
||
- 训练流程：开始 → 训练中（显示组数/次数）→ 休息 → 完成
|
||
- 配置：80 BPM，4组×20次，45秒休息
|
||
- 节拍器同步：跟随 BPM 播放音效
|
||
|
||
**用户需求：**
|
||
1. **捏碎特效**：完成几次后触发特效（如捏碎鸡蛋）
|
||
2. **卡路里统计**：训练完成后显示消耗卡路里 + 食物对比
|
||
|
||
**技术约束：**
|
||
- 使用 uni-app + Vue 3
|
||
- 动画可用 CSS 或 Canvas
|
||
- 需要保持 60fps 流畅度
|
||
|
||
## Assumptions (temporary)
|
||
|
||
- 捏碎特效每完成 N 次触发一次（N 待定）
|
||
- 卡路里计算基于握力环训练的标准公式
|
||
- 食物对比使用常见食物（如苹果、鸡蛋、米饭等）
|
||
|
||
## Open Questions
|
||
|
||
1. ~~**捏碎特效触发频率**~~：✅ 随机触发（平均每 8-12 次）
|
||
2. ~~**捏碎物品种类**~~：✅ 4 种物品（鸡蛋🥚、核桃🥜、易拉罐🥫、气球🎈）
|
||
3. ~~**特效实现方式**~~：✅ Canvas 粒子动画（叠加层 + 物理模拟）
|
||
4. ~~**卡路里计算公式**~~：✅ 标准 MET 公式（默认 60kg 体重）
|
||
5. ~~**食物对比展示**~~：✅ 自动匹配最接近的食物（5 种备选）
|
||
6. ~~**用户体重获取**~~：✅ 使用默认值 60kg（暂不支持自定义）
|
||
|
||
## Requirements (evolving)
|
||
|
||
### 1. 捏碎特效
|
||
- [ ] 随机触发（平均每 8-12 次触发一次）
|
||
- [ ] 4 种可捏碎物品：鸡蛋🥚、核桃🥜、易拉罐🥫、气球🎈
|
||
- [ ] 随机选择物品（增加惊喜感）
|
||
- [ ] 特效流畅（60fps）
|
||
- [ ] 配合 MiMo TTS 语音鼓励（"加油"、"太棒了"等）
|
||
- [ ] 无需指导视频（用户跟节拍器节奏训练）
|
||
|
||
### 2. 卡路里统计
|
||
- [ ] 使用标准 MET 公式计算卡路里消耗
|
||
- 公式：`卡路里 = 3.5 × 60(kg) × 运动时长(小时)`
|
||
- 默认体重 60kg，80 次训练 ≈ 3.5 kcal
|
||
- [ ] 训练完成后显示消耗卡路里
|
||
- [ ] 自动匹配最接近的食物对比
|
||
- 5 种备选：苹果🍎、鸡蛋🥚、巧克力🍫、香蕉🍌、米饭🍚
|
||
- 显示格式："相当于 X/Y 个{食物}"
|
||
- [ ] 暂不支持自定义体重（未来可扩展）
|
||
|
||
### 3. 完成页面优化
|
||
- [ ] 显示训练总结（组数、次数、时长、卡路里）
|
||
- [ ] 成就感反馈（如"太棒了！💪"）
|
||
- [ ] 分享功能（可选）
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [ ] 捏碎特效随机触发（平均每 8-12 次）
|
||
- [ ] 4 种捏碎物品随机出现（鸡蛋/核桃/易拉罐/气球）
|
||
- [ ] 粒子动画流畅（60fps）
|
||
- [ ] 卡路里计算准确（基于标准 MET 公式）
|
||
- [ ] 食物对比自动匹配最接近的食物
|
||
- [ ] 完成页面显示训练总结（组数、次数、时长、卡路里、食物对比）
|
||
- [ ] 动画无卡顿，特效与握力环动画同步
|
||
|
||
## Definition of Done
|
||
|
||
- 代码实现完成并测试通过
|
||
- 动画性能达标（60fps）
|
||
- UI/UX 符合设计规范
|
||
- 无明显 bug
|
||
|
||
## Out of Scope (explicit)
|
||
|
||
- 训练数据持久化（本地存储/云端同步）
|
||
- 社交分享功能
|
||
- 多人排行榜
|
||
- 自定义用户体重（未来可扩展）
|
||
- 累计卡路里统计（本版本仅显示单次）
|
||
- 其他器械的趣味化（本任务仅限握力环）
|
||
|
||
## Research References
|
||
|
||
* [`research/calorie-calculation.md`](research/calorie-calculation.md) — 握力环训练卡路里计算公式与食物对比方案
|
||
|
||
## Technical Notes
|
||
|
||
**相关文件：**
|
||
- `TUICallKit-Vue3/training/pages/index.vue` - 主训练页面
|
||
- `TUICallKit-Vue3/training/pages/components/exercise-anim.vue` - 动画组件
|
||
- `TUICallKit-Vue3/training/pages/exercises.ts` - 训练配置
|
||
- `TUICallKit-Vue3/training/hooks/useTrainingSession.ts` - 训练流程管理
|
||
|
||
**握力环当前动画：**
|
||
- 绿色圆环（240rpx）+ emoji 图标（🟢）
|
||
- CSS scale 动画：1 → 0.65 → 1
|
||
|
||
**Canvas 粒子特效方案：**
|
||
- 透明 Canvas 叠加在握力环上方
|
||
- 在 scale 0.65 峰值时触发粒子爆炸
|
||
- 粒子系统：20 个粒子，径向扩散 + 重力 + 衰减
|
||
- 物品配置：4 种（鸡蛋/核桃/易拉罐/气球），不同颜色
|
||
- 参考 `walker-canvas.vue` 的冲击波实现
|
||
|
||
**卡路里计算方案：**
|
||
- 标准 MET 公式：`卡路里 = 3.5 × 体重(kg) × 时长(小时)`
|
||
- 详细研究报告：[`research/calorie-calculation.md`](research/calorie-calculation.md)
|
||
- 典型消耗：60kg 用户，80 次 ≈ 3.5 kcal
|
||
- 食物对比库：苹果🍎、鸡蛋🥚、巧克力🍫、香蕉🍌、米饭🍚
|