Skip to content

fix: Windows 端串流后音量环动画持续卡顿(clip-path 回收至 Linux,串流循环动画改 CSS) - #367

Merged
OrientCOMPASS merged 1 commit into
MicYou-Dev:masterfrom
OrientCOMPASS:fix/windows-streaming-ring-stutter
Oct 10, 2026
Merged

OrientCOMPASS merged 1 commit into
MicYou-Dev:masterfrom
OrientCOMPASS:fix/windows-streaming-ring-stutter

Conversation

@OrientCOMPASS

Copy link
Copy Markdown
Contributor

为什么改

v2.1.0 在 Windows 实机上:启动后首次连接进入串流,主界面音量环动画出现不间断卡顿,像被反复短暂阻塞;空闲时不卡,一串流就卡。

此前怀疑过 DSP/ONNX 模型首包加载阻塞音频线程,做过「模型预热 + 陈旧积压丢弃」并在实机验证——症状无任何变化,已回滚,后端方向排除。

排查 2.1.0 前端改动后定位到两个回归点,都恰好只在串流期间持续生效:

  1. 全局 body { clip-path: inset(0 round 1rem) }(refactor: rework desktop windows around a self-drawn frameless shell #353 引入)。refactor: rework desktop windows around a self-drawn frameless shell #353 的圆角设计是分平台的:「Windows DWM 圆角偏好、macOS vibrancy、Linux clip-path」,但实现落在了全局 CSS,Windows/macOS 也被无差别裁剪。Chromium/WebView2 里文档级圆角裁剪让整页内容每帧都要经过带遮罩的合成表面;主窗口本身是透明 + acrylic 的重合成路径,串流时音量环每帧 rAF 写 SVG 属性、辉光/脉冲每帧弄脏页面,叠加每帧全窗口遮罩合成后持续掉帧——就是「不间断卡顿」的直接来源。该裁剪在 Windows 上冗余:Win11 有 DWM 圆角裁剪,Win10 回到 v2.0.3 的内容自绘圆角观感。

  2. anime.js v3→v4 后,两个无限循环动画跑在主线程(中央辉光呼吸 2s、底栏状态点脉冲 1.5s,均仅 streaming 状态运行)。v4 引擎每帧在主线程 tick 并写内联样式,与 ~8Hz 的 audio-level IPC 事件、Vue 重渲染、音量环自身的 rAF 循环争抢主线程,在被 ① 拖慢的合成路径上进一步放大掉帧。

已排除的方向(均有代码/实测证据):AudioRing.vue 两版无 diff;level/metrics 事件频率两版一致;jitter prebuffer 时间制只影响起播;queued_ms 已由 8f3c4c3 改为原子读;anime.js 上游帧率缺陷(juliangarnier/anime#1112)在 4.3.0 已修复、本仓库锁定 4.5.0;windowEffects 配置两版相同;useWindowEffects 在非 Linux 平台一次性闩锁、无持续开销。

改了什么

纯前端(CSS/Vue),后端零改动,未 bump 版本:

  • src/shared/assets/index.css
    • body 的 clip-path 移入 .platform-linux body(App/设置窗口挂载时已由 applyPlatformClasses() 打类,Linux 行为不变;Windows 交还 DWM 圆角、macOS 交还 vibrancy)
    • 新增 glow-breathe / dot-pulse keyframes 与工具类:仅 transform/opacity,由合成器驱动,时长与缓动同原 anime 参数(2s inOutSine alternate / 1.5s inOutQuad),并自动被现有 prefers-reduced-motion 规则覆盖(原 anime 循环不理会该设置)
  • src/App.vue:删除两个 anime.js 循环动画的 watchEffect 与相关 ref/变量,模板改用上述 CSS 类(辉光元素本身仅 streaming 挂载;状态点按状态绑定 dot-pulse);anime.js 保留用于一次性交互(悬停、点击回弹);清理未用导入(watchEffect/utils/JSAnimation)
  • src/features/plugins/components/PluginPanelWindow.vue:插件面板窗口根容器补 rounded-2xl——该窗口不调用 applyPlatformClasses,原先依赖文档级 clip 获得圆角,现在自绘(视觉上与原先一致,同为 1rem 圆角)
  • AGENTS.md:记录平台化圆角策略与「持续动画走合成器 CSS 动画、JS 动画库仅用于一次性交互」的约定

验证

  • Windows 实机(原症状复现环境):安装本分支 CI 构建包复测,首次连接串流下音量环动画平滑,卡顿消失
  • Linux 不受影响:clip-path 在 .platform-linux 下原样保留,KDE Wayland 原生模糊/阴影逻辑未动

@micyou-automation micyou-automation Bot added reviewing 正在复核 size/l 100-499 行 labels Oct 9, 2026

@ChouChiu ChouChiu left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

去除冗余注释

@micyou-automation micyou-automation Bot added waitmerge 等待合并 and removed reviewing 正在复核 labels Oct 9, 2026
@OrientCOMPASS
OrientCOMPASS force-pushed the fix/windows-streaming-ring-stutter branch from b6e8b50 to bed3680 Compare October 9, 2026 15:20
@micyou-automation micyou-automation Bot added reviewing 正在复核 and removed waitmerge 等待合并 labels Oct 9, 2026
v2.1.0 clipped the whole document with a rounded body clip-path and drove
the two continuous streaming loops (central glow breathing, status dot
pulse) through the anime.js v4 engine. On Windows WebView2 the
document-wide rounded clip forces every composited frame through a clip
render surface, and the JS engine ticked on the main thread against the
high-rate audio IPC events — together they made the volume ring animation
hitch continuously as soon as the first client started streaming.

- scope the body clip-path to .platform-linux, matching the per-platform
  design of the frameless shell rework: Windows rounds via the DWM corner
  preference, macOS via the NSWindow corner radius from vibrancy
- run the streaming loops as compositor-driven CSS keyframe animations
  (transform/opacity only, same durations and easing curves); anime.js
  stays for one-shot interactions (hover, click rebound)
- round the plugin panel window root itself; that window never applied
  the platform classes and so no longer inherits a document clip

Backend untouched; no version bump.
@OrientCOMPASS
OrientCOMPASS force-pushed the fix/windows-streaming-ring-stutter branch from bed3680 to c291de8 Compare October 9, 2026 15:27
@micyou-automation micyou-automation Bot added size/m 30-99 行 and removed size/l 100-499 行 labels Oct 9, 2026
@OrientCOMPASS
OrientCOMPASS requested a review from ChouChiu October 9, 2026 15:29
@micyou-automation micyou-automation Bot added waitmerge 等待合并 and removed reviewing 正在复核 labels Oct 9, 2026
@OrientCOMPASS
OrientCOMPASS merged commit 8d4951d into MicYou-Dev:master Oct 10, 2026
5 checks passed
@micyou-automation micyou-automation Bot added done 完成 and removed waitmerge 等待合并 labels Oct 10, 2026
@OrientCOMPASS
OrientCOMPASS deleted the fix/windows-streaming-ring-stutter branch October 10, 2026 03:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

done 完成 size/m 30-99 行

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants