曲线动画

曲线沿时间轴匀速向左流动：每个点按快照的实际采集时间定位，图表右边缘是“现在减两个刷新间隔”，正常刷新时最新的点已经画在右边界外，所以不用等下一个点，也就没有停顿。每次采样只在 canvas 上画一次，之后只平移画布。实现在 ui/src/components/Trace.tsx。

四档模式

“设置 → 动画 → 曲线动画”提供四档：

设置里显示的帧数是实测的屏幕刷新率：取 60 帧的间隔（去掉跳帧）求平均，再对齐到常见的标称值；窗口重新获得焦点、换到其他缩放比例的屏幕时以及每 30 秒重测一次。流畅模式本身不依赖这个数，合成器总是按屏幕刷新。

合成开销取自 Chromium 跟踪中 GPU 进程与渲染进程合成线程的耗时；同一时段直接测 CPU 占用波动极大（测量时机器上另有占用多个核心的负载），不作为依据，测量方法见性能基线与测量。流畅与均衡模式下，帧之间主线程没有工作。

实现要点

• 不要用圆角容器裁剪动画元素：任何带圆角又 overflow: hidden 的祖先，都会让合成器每帧为每个移动图层多做一次遮罩绘制。去掉这些裁剪后，逻辑处理器视图（31 个图表）的开销从约 94% 降到 28%（同一时段测得）。现在圆角卡片不裁剪内容，图表用自己的矩形裁剪；性能页的详情卡片里另放一个方角的滚动容器。
• 画面只能在定型后出现：平滑曲线在某点的弯曲取决于它后面的点，所以一段曲线要等后一个采样到了才定型。右边缘落后“现在”两个刷新间隔（落后一个间隔时，最右一段会在每次采样时重新弯一下），左边缘外多画两个点。
• 历史按时间保留：数据保留范围覆盖当前刷新间隔对应的时间窗、显示延迟与边界外的辅助点。时间戳和各序列按同一范围裁剪，不能只保留固定条数：额外刷新或较快的后台采样会增加窗口内的点数，按条数丢弃会把仍应显示的左侧曲线提前截掉。调长刷新间隔时保留已有数据，让更宽的时间窗逐渐填满。
• 采集时间与接收时间分开：store.ts 按快照中的 Unix 毫秒时间戳与接收时的系统时间之差，将采集时刻换算到 performance.now() 时间轴。WebView 隐藏或繁忙时可能延迟交付，恢复后集中到达的快照仍保持原有采样间隔，不能用回调执行时间定位，否则会将后台历史压成密集尖峰。
• 虚线不爬动、尖峰上也均匀：canvas 自带的虚线从路径起点按长度排，最旧的点一移出就整体错位、沿线爬动；按横向位置切（竖条裁剪）又会让陡峭的尖峰几乎成实线。现在由 Argus 自己把曲线展平成约 1 像素的小段、按长度切出虚线，并记住每个采样点在虚线图案中的位置，重画时让已经在屏幕上的点保持原位。
• 相邻两次重画逐像素一致：每次重画的画布原点落在时间轴的整像素上，相邻两次重画只差整体平移。
• 共用帧：均衡模式下各图表的分步若各自起算，帧数会叠加（20 个图表时 139 帧/秒）；对齐到同一网格后稳定在刷新率的一半。
• 每核小条也连续移动：每根条的填充是一个真实元素（不是伪元素：Chromium 在主线程执行伪元素的过渡，实测每秒约 40 次重绘），在合成器上用一个刷新间隔从当前高度线性移到新值，下一个采样到达时正好到位。所有轨道都画在第一根填充之前，填充另起一排盖在轨道上：画在移动图层之后、又可能与它重叠的内容会单独成层，而合成器每帧都把全部图层发给 GPU 进程。轨道原先逐根画在前一根的填充之后，20 个逻辑处理器时进程页因此多出 19 个图层；改为先画轨道后，图层从 61 个减到 42 个，每帧发给 GPU 进程的数据约少三分之一（发布构建，1 秒刷新，流畅模式）。
• 悬停读数停在指针下：竖线固定在指针处，曲线从它下面流过；圆点与提示里的数值取自同一条平滑曲线在竖线处的位置。时间是竖线处距现在的秒数，指针不动时保持不变；关闭动画时从最新采样算起，暂停时保留暂停瞬间的时间参考。若从最新采样算起，移动的曲线每到一个采样时间会跳回一秒。读数若吸附到最近的采样点并随画布平移，指针不动时竖线会随曲线左移、再跳回下一个采样点，往复不停。流畅与均衡模式下圆点也由合成器移动：按画布到下一次采样前的平移，把竖线处的曲线高度预先算成关键帧（流畅模式每设备像素一帧，均衡模式每个共享网格步一帧），与画布用同一时间轴。竖线靠近右缘时，曲线在画布停下之前就到了最新采样处，关键帧只算到那里，下一次采样会重新计算；若因此整段不建动画，圆点只能随文字每 100 ms 移动一次，右缘一带明显卡顿。提示里的文字每 100 ms 更新一次。逐帧用 requestAnimationFrame 跟随会让主线程每帧推进页面上所有曲线动画的样式，悬停时主线程占用约为不悬停时的五倍以上（无头 Edge 实测）。省电模式随整像素移动更新。
• 满刻度紧贴上沿：曲线顶端只留半个线宽（0.75 像素），100% 的线完整显示、紧贴图框的上边框，上方不留空隙，曲线图、侧栏缩略图与历史页相同。原先留 3 像素时，上边框与线条之间隔着一行底色，两者颜色相近，满刻度的线难以分辨；现在线条对齐整像素，比原先分在两行时更亮。小图（逻辑处理器、GPU 引擎）同样如此：标题行放在外框之外，外框只围住曲线；标题与曲线同在一个框里时，标题上方的框线容易被误读为 100%。
• 上限取整，变化时缓动：自动缩放的纵轴（磁盘、网络、功耗、详细信息面板的内存）以时间窗内的峰值定上限，在标签所用的单位下向上取整：不超过 10 取整数，超过 10 取整十数，满一千进到下一个单位（lib/chart-scale.ts）。上限变化时在 420 ms 内按比例缓出（十倍与两倍的变化同样平稳），只重画画布，时间轴照常移动；均衡与省电模式按各自的步长重画，关闭动画时直接切换。显示对象改变（详细信息面板换了进程）时新上限直接生效，不从上一个对象的上限过渡。峰值稳定时上限不变，没有额外的重画。
• 圆点出现时即开始动画：曲线尚未铺满时，指针可先停在无数据处。曲线流到指针下方、读数首次出现时，等圆点元素挂载后立即创建合成器动画，不等下一次采样或鼠标移动；同一图表内较晚出现的另一条曲线也如此。
• 界面动画只播放一次：切换页面、菜单、对话框、滑动的选中标记只在操作时播放，可单独关闭；默认跟随 Windows 的“动画效果”开关。
• 暂停与隐藏：暂停刷新时保留合成器当前显示的画布位置与悬停读数，不切换到“关闭动画”模式或把最新采样移到右边缘，否则会跳过显示延迟而整图位移。暂停期间缩放窗口仍使用冻结的时间轴重画；恢复刷新后重新对齐实时时间轴。窗口隐藏或被完全挡住时 WebView2 停止渲染，动画也随之停止。