From 0d5d275370b650591430b34a57bbb903bc69d8bb Mon Sep 17 00:00:00 2001 From: baiqing Date: Wed, 6 May 2026 13:26:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(capsule):=20AudioBars=20=E7=94=A8=20cubic-?= =?UTF-8?q?bezier=20=E7=BC=93=E5=8A=A8=20+=20=E5=8A=A0=E9=95=BF=20transiti?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈：录音胶囊的语音条 UI 跳转有问题——目前是圆形跳成矩形， 视觉效果不自然，且存在卡顿，动效不够优雅、速度太快。 根因：AudioBars 每个 bar 的 height 跟随 audio level 在 2~24px 之间 变化（width=3 + borderRadius:999，height=2 像圆点、height=24 像 长条），但 transition 只有 0.08s。audio level 来自后端 RMS 回调， 60Hz 高频更新；每次 React re-render 修改 inline style.height 都重启 transition 动画。0.08s 在持续 retrigger 场景下永远在动画前段， 视觉上是阶梯式跳变（"圆形跳成矩形"+ 卡顿）。 修复：transition 0.08s → 0.18s + cubic-bezier(0.22, 1, 0.36, 1) （easeOutExpo-like），让多次 update 在曲线内平滑混合，圆→长条 的形变变得自然顺滑。0.18s 仍跟得上音量节奏，不影响响应感。 --- openless-all/app/src/components/Capsule.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/openless-all/app/src/components/Capsule.tsx b/openless-all/app/src/components/Capsule.tsx index 2dc77d32..da5d5480 100644 --- a/openless-all/app/src/components/Capsule.tsx +++ b/openless-all/app/src/components/Capsule.tsx @@ -45,7 +45,10 @@ function AudioBars({ level }: AudioBarsProps) { background: 'var(--ol-blue)', opacity: 0.82, transformOrigin: 'center', - transition: 'height 0.08s var(--ol-motion-quick)', + // 0.08s 在 60Hz audio-level 更新下太快，每次 re-render 都重启 transition， + // 视觉上是阶梯式跳变。延长到 0.18s 让多次 update 在曲线内平滑混合， + // easeOutExpo-like 缓动让圆点→长条的形变自然顺滑（用户原话"圆形跳成矩形"）。 + transition: 'height 0.18s cubic-bezier(0.22, 1, 0.36, 1)', }} /> ))}