From 867a6a97cfc47b10dae5dac00a6b0df3e957f166 Mon Sep 17 00:00:00 2001 From: long <452591453@qq.com> Date: Mon, 25 May 2026 16:15:46 +0800 Subject: [PATCH] =?UTF-8?q?feat(metronome):=20walker=20=E5=8C=BA=E6=94=B9?= =?UTF-8?q?=E7=94=A8=20MP4=20=E8=A7=86=E9=A2=91,playbackRate=20=E8=B7=9F?= =?UTF-8?q?=20BPM=20=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将之前的 PNG runner + CSS 律动方案,升级为真正的卡通 walk cycle 视频: - 删除 runner.png(静态图无法表现关节运动) - 新增 runner.mp4(LottieFiles 卡通跑步动画,150x150, 60fps, 27KB) - walker 区从 image + CSS 抖动 改为 video + playback-rate 调速 - 视频原速基准 124 BPM(0.97s 一个 walk cycle = 2 步) - playbackRate = clamp(bpm/124, 0.5, 2.0),贴合微信小程序限制 - 视频与节拍器同步策略: · watch isPlaying → 自动 play/pause · watch playbackRate → 调用 videoCtx.playbackRate API 兜底 · onMounted 默认暂停,等用户点开始才播 - 视频白底跟暗色卡片冲突,改用"嵌入式高亮卡片"设计: · runner-card 白底 + 32rpx 圆角 + 阴影,像专业健康 APP · video object-fit contain 保证不被裁切 - 移除冗余的 .ground 地面线样式 Co-authored-by: Cursor --- TUICallKit-Vue3/pages/training/metronome.vue | 162 ++++++++----------- TUICallKit-Vue3/static/training/runner.mp4 | Bin 0 -> 27784 bytes TUICallKit-Vue3/static/training/runner.png | Bin 4343 -> 0 bytes 3 files changed, 67 insertions(+), 95 deletions(-) create mode 100644 TUICallKit-Vue3/static/training/runner.mp4 delete mode 100644 TUICallKit-Vue3/static/training/runner.png diff --git a/TUICallKit-Vue3/pages/training/metronome.vue b/TUICallKit-Vue3/pages/training/metronome.vue index f2256a17..2a63721c 100644 --- a/TUICallKit-Vue3/pages/training/metronome.vue +++ b/TUICallKit-Vue3/pages/training/metronome.vue @@ -28,15 +28,24 @@ - - + @@ -78,10 +87,18 @@