fixing-motion-performance

修复动画性能问题

修复动画性能问题。

使用方法

• /fixing-motion-performance 在本次对话中的任何 UI 动画工作中应用这些约束。

• /fixing-motion-performance <file> 根据以下所有规则检查文件，并报告：

  • 违规项（引用准确的行或代码片段）
  • 为何重要（一句简短说明）
  • 具体修复方案（代码级建议）

除非明确要求，否则不要迁移动画库。在现有技术栈中应用规则。

适用场景

在以下情况下参考这些指南：

• 添加或修改 UI 动画（CSS、WAAPI、Motion、rAF、GSAP）
• 重构卡顿的交互或过渡效果
• 实现滚动联动动画或滚动时显现效果
• 为布局、滤镜、蒙版、渐变或 CSS 变量制作动画
• 检查使用 will-change、变换或测量的组件

渲染步骤术语表

• 合成：变换、不透明度
• 绘制：颜色、边框、渐变、蒙版、图像、滤镜
• 布局：尺寸、位置、流式布局、网格、弹性布局

按优先级划分的规则类别

优先级	类别	影响
1	禁用模式	严重
2	选择机制	严重
3	测量	高
4	滚动	高
5	绘制	中高
6	图层	中
7	模糊和滤镜	中
8	视图过渡	低
9	工具边界	严重

快速参考

1. 禁用模式（严重）

• 不要在同一帧中交错执行布局读取和写入
• 不要在大面积或重要表面上持续制作布局动画
• 不要通过 scrollTop、scrollY 或滚动事件驱动动画
• 没有停止条件时，不要使用 requestAnimationFrame 循环
• 不要混用多个会分别测量或修改布局的动画系统

2. 选择机制（严重）

• 默认使用变换和不透明度实现动效
• 仅在交互需要时使用 JS 驱动的动画
• 仅在小型、独立的表面上使用绘制或布局动画
• 一次性效果通常比持续动效更可取
• 相比完全移除动效，优先采用较低开销的实现方式

3. 测量（高）

• 测量一次，然后通过变换或不透明度制作动画
• 将所有 DOM 读取操作集中在写入操作之前
• 不要在动画过程中反复读取布局
• 对类似布局的效果，优先采用 FLIP 式过渡
• 优先采用能集中处理测量和写入操作的方案

4. 滚动（高）

• 条件允许时，滚动联动动效优先使用 Scroll Timelines 或 View Timelines
• 使用 IntersectionObserver 检测可见性并暂停动画
• 不要轮询滚动位置来驱动动画
• 元素移出屏幕后暂停或停止动画
• 滚动联动动效不得在大面积表面上持续触发布局或绘制

5. 绘制（中高）

• 仅允许在小型、独立的元素上使用会触发绘制的动画
• 不要在大型容器上为绘制开销高的属性制作动画
• 不要为用于变换、不透明度或位置的 CSS 变量制作动画
• 不要为继承的 CSS 变量制作动画
• 将动画 CSS 变量限定在局部范围内，并避免继承

6. 图层（中）

• 合成器动效需要提升图层，切勿认为它会自动发生
• 临时且有针对性地使用 will-change
• 避免提升过多图层或过大的图层
• 性能至关重要时，使用工具验证图层行为

7. 模糊和滤镜（中）

• 将模糊动画控制在较小范围内（<=8px）
• 仅将模糊用于短暂的一次性效果
• 切勿持续制作模糊动画
• 切勿在大面积表面上制作模糊动画
• 优先使用不透明度和位移，再考虑模糊

8. 视图过渡（低优先级）

• 仅在导航级别的变化中使用视图过渡
• 避免在交互频繁的 UI 中使用视图过渡
• 需要中断或取消时，避免使用视图过渡
• 将尺寸变化视为可能触发布局调整的因素

9. 工具边界（关键）

• 除非明确要求，否则不要迁移或重写动画库
• 在现有动画系统中应用这些规则
• 绝不要只迁移部分 API，也不要在同一组件中混用不同风格

审查指南

• 首先严格执行关键规则（禁止模式、工具边界）
• 选择符合意图且渲染开销最低的方案
• 对于任何非默认选择，说明其依据的约束（界面尺寸、持续时间或交互要求）
• 审查时，优先给出可执行的建议和具体替代方案，而不是理论说明