- 替换原来两只脚印为一张跑步小人 PNG(static/training/runner.png)
- 静态 PNG + CSS 律动:
· runner-bob keyframes: 1 拍内做"下蹲→起跳→反向倾斜→落地"
四个阶段,模拟跑步身体起伏
· 上下抖动 ±14rpx, 左右轻摆 ±1.5°,scale Y 微妙压缩
· drop-shadow 让人物有立体感
- 阴影同步:runner-shadow-pulse 跟律动反向变化
(跳起时阴影变小变淡 0.2,落地时变大变浓 0.5)
- 动画 duration 绑定 --step-duration = 60000/bpm
· BPM 60 → 1000ms/次,慢悠悠
· BPM 120 → 500ms/次,正常跑
· BPM 180 → 333ms/次,紧张快跑
注意: 用户提供的文件实际是静态 PNG 不是 SVG 动图,
所以是"画面整体律动"而非真正的 walk cycle 关节运动。
Co-authored-by: Cursor <cursoragent@cursor.com>
训练模块静态资源
本目录用于存放"练一练"功能的所有音频素材。
目录结构
src/static/training/
├── audio/
│ └── click.mp3 # 节拍器主音(短促金属敲击声,约 50ms)
├── voice/
│ ├── numbers/
│ │ └── 1.mp3 ~ 30.mp3 # 数字报数
│ └── prompts/
│ ├── start.mp3
│ ├── ready.mp3
│ ├── rest.mp3
│ ├── next-set.mp3
│ ├── last-rep.mp3
│ ├── keep-it-up.mp3
│ ├── good-job.mp3
│ ├── breathe-in.mp3
│ └── breathe-out.mp3
└── bgm/
├── train-light.mp3 # 训练时背景乐(轻快有节奏感)
└── rest-meditation.mp3 # 休息时背景乐(舒缓冥想)
准备步骤
1. 语音素材(小米 MiMo TTS 自动生成)
需要 Node 18+(用内置 fetch)。先准备小米 MiMo API Key:
- 文档: https://platform.xiaomimimo.com/
- API Key 形如
sk-xxxxxxxx
export MIMO_API_KEY=sk-your-key-here
cd uniapp
node scripts/generate-voice.mjs
会自动调用 mimo-v2.5-tts 模型生成 39 个 mp3(30 个数字 + 9 个口令)到 voice/ 目录。
可选参数:
# 换音色(默认 冰糖;可选:冰糖/茉莉/苏打/白桦/Mia/Chloe/Milo/Dean)
node scripts/generate-voice.mjs --voice 茉莉
# 换格式(默认 mp3,需要跟 hooks/useVoiceCoach.ts 里的 .mp3 后缀对应)
node scripts/generate-voice.mjs --format wav
# 强制重新生成(默认存在则跳过)
node scripts/generate-voice.mjs --force
音色推荐(中文女声更适合健身教练):
冰糖:温柔甜美,亲和力强(默认)茉莉:清爽利落,有"运动博主"感苏打:年轻男声,有力量感白桦:成熟男声,沉稳
2. 节拍器 click 音
已内置 3 种音色(来自 chrono-bump MIT 协议项目):
| 文件 | 用途 | 大小 |
|---|---|---|
audio/click.mp3 |
默认 click(标准节拍器音) | 3.4 KB |
audio/click-soft.mp3 |
柔和音色 | 4.2 KB |
audio/click-wood.mp3 |
木鱼/原木质感(推荐用于重音 accent) | 4.6 KB |
如果想换更好听的,可以去:
- freesound.org 搜 "click" / "tick"(注意 CC 协议)
- pixabay.com/sound-effects 搜 "metronome"(免费可商用)
替换时保持文件名不变即可,无需改代码。
3. 背景音乐
每首 30 秒~2 分钟即可(loop 后听不出接缝)。
推荐来源(免费可商用):
- pixabay.com/music 搜 "calm" / "meditation" / "lofi"
- freemusicarchive.org
- bensound.com(含署名)
文件大小建议 < 1MB(mp3 128kbps 单声道即可)。
在代码里被引用的位置
src/hooks/useMetronome.ts→audio/click.mp3src/hooks/useVoiceCoach.ts→voice/numbers/*.mp3、voice/prompts/*.mp3src/hooks/useTrainingBgm.ts→bgm/*.mp3
如需修改路径,修改对应 hook 文件里的常量即可。
注意事项
- 微信小程序对单个文件大小有 10MB 上限,本目录所有文件加起来建议控制在 5MB 以内。
- 小程序整包大小限制(主包 2MB / 总包 20MB),如果资源较大建议放 CDN 而非本地 static。
- 把
useVoiceCoach.ts里的VOICE_BASE改成 CDN URL 即可。
- 把