feat(metronome): walker 区接入卡通跑步小人,跟 BPM 同步律动
- 替换原来两只脚印为一张跑步小人 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>
longandCursor
a3ee72b34d