fixing-motion-performance

修复动画性能问题。

使用方法

/fixing-motion-performance
将以下约束应用于本次对话中的任何 UI 动画工作。
/fixing-motion-performance <file>
根据以下所有规则审查文件，并报告：
- 违规项（引用确切的行或代码片段）
- 为什么重要（一句简短说明）
- 具体修复方案（代码级别的建议）

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

何时应用

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

添加或更改 UI 动画（CSS、WAAPI、Motion、rAF、GSAP）
重构卡顿的交互或过渡
实现滚动关联动画或滚动时显示效果
对布局、滤镜、遮罩、渐变或 CSS 变量进行动画
审查使用 will-change、transform 或测量的组件

渲染步骤术语表

composite：transform、opacity
paint：颜色、边框、渐变、遮罩、图像、滤镜
layout：尺寸、位置、流式布局、网格、弹性布局

按优先级分类的规则类别

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

快速参考

1. 禁止模式（严重）

不要在同一帧中交错进行布局读取和写入
不要在大型或有意义的表面上连续动画布局
不要通过 scrollTop、scrollY 或 scroll 事件驱动动画
不要使用没有停止条件的 requestAnimationFrame 循环
不要混合使用多个各自测量或修改布局的动画系统

2. 选择机制（严重）

默认使用 transform 和 opacity 进行动画
仅在交互需要时使用 JS 驱动的动画
仅在小而孤立的表面上允许绘制或布局动画
一次性效果比连续动画更可接受
优先降低技术等级，而不是完全移除动画

3. 测量（高）

测量一次，然后通过 transform 或 opacity 进行动画
在写入之前批量进行所有 DOM 读取
不要在动画期间重复读取布局
对于类似布局的效果，优先使用 FLIP 风格的过渡
优先采用批量测量和写入的方法

4. 滚动（高）

对于滚动关联动画，优先使用 Scroll 或 View Timelines（如果可用）
使用 IntersectionObserver 处理可见性和暂停
不要轮询滚动位置进行动画
在屏幕外时暂停或停止动画
滚动关联动画不得在大型表面上触发连续的布局或绘制

5. 绘制（中高）

仅在小而孤立的元素上允许触发绘制的动画
不要在大型容器上动画绘制密集型属性
不要对 transform、opacity 或 position 的 CSS 变量进行动画
不要对继承的 CSS 变量进行动画
将动画的 CSS 变量限定在局部作用域，避免继承

6. 图层（中）

合成器动画需要图层提升，切勿假设已提升
临时且精准地使用 will-change
避免大量或大型的提升图层
当性能重要时，使用工具验证图层行为

7. 模糊和滤镜（中）

保持模糊动画较小（<=8px）
仅用于短时的一次性效果
切勿连续动画模糊
切勿在大型表面上动画模糊
优先使用 opacity 和 translate 而非模糊

8. 视图过渡（低）

仅用于导航级别的变化
避免在交互密集的 UI 中使用视图过渡
当需要中断或取消时避免使用视图过渡
将尺寸变化视为可能触发布局

9. 工具边界（严重）

除非明确要求，否则不要迁移或重写动画库
在现有动画系统内应用这些规则
切勿部分迁移 API 或在同一组件中混合样式

常见修复

/* 布局抖动：使用 transform 替代 width 进行动画 */
/* 之前 */ .panel { transition: width 0.3s; }
/* 之后 */  .panel { transition: transform 0.3s; }

/* 滚动关联：使用 scroll-timeline 替代 JS */
/* 之前 */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)
/* 之后 */  .reveal { animation: fade-in linear; animation-timeline: view(); }

// 测量：在写入前批量读取（FLIP）
// 之前 — 布局抖动
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// 之后 — 测量一次，通过 transform 动画
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });