用途:审查并修复动画性能问题,包括布局抖动、合成器属性、滚动关联动画与模糊效果。适用于新增或修改 UI 动画、重构卡顿交互、实现滚动显隐,以及动画布局、滤镜、渐变或 CSS 变量时的性能约束。
用法:在对话中输入 /fixing-motion-performance 应用规则;输入 /fixing-motion-performance <file> 则对照规则审查该文件,逐条报告违规片段、原因和代码级修复建议。除非明确要求,不迁移或重写动画库,须在既有技术栈内应用规则,且不在同一组件中混用多套动画系统。
核心约束:不要在浏览器同一帧内交错读写布局;不要对大区域持续动画布局;不要由 scrollTop、scrollY 或 scroll 事件驱动动画;不要使用无停止条件的 requestAnimationFrame 循环。动画默认使用 transform 与 opacity,仅当交互需要时才用 JS 驱动;绘制或布局动画只允许出现在小范围独立元素上。测量应一次性完成并先批量读取再写入,可优先 FLIP 式过渡。滚动关联动画优先 Scroll 或 View Timelines,可见性与暂停用 IntersectionObserver,离屏须暂停动画。模糊动画不超过 8px,仅用于短时一次性效果,不对大区域或持续动画模糊。图层提升需临时、精准使用,避免大量或大面积提升层,并在需要时用工具验证。视图过渡仅用于导航级变化。
常见修复示例:将 transition: width 改为 transition: transform 以避免布局抖动;用 animation-timeline: view() 替换 scroll 事件驱动的透明度变化;先测量再加入类并测量,最后用 transform 和 requestAnimationFrame 完成 FLIP 过渡。
限制:资料未提供适用平台、安装命令、收费方式或更多运行环境说明。