SuperAPI AI 工具集

fixing-motion-performance

设计与创作

查看项目

更新于 10-16 09:48

技能介绍

用途:审查与修复 UI 动画性能问题,涵盖布局抖动(layout thrashing)、合成器属性、滚动联动动画与模糊效果。适用于新增或修改 CSS、WAAPI、Motion、rAF、GSAP 动画,重构卡顿交互或过渡,实现滚动联动或滚动揭示动画,动画化布局、滤镜、遮罩、渐变或 CSS 变量,以及检查使用 will-change、transform 或测量的组件。

主要能力:按优先级给出规则分类,包括永不模式、机制选择、测量、滚动、绘制、图层、模糊与滤镜、视图过渡、工具边界。核心约束如同一帧内不交叉读写布局、不为大表面持续动画化布局、不由 scrollTop/scrollY 或滚动事件驱动动画、rAF 循环须有停止条件、默认使用 transform 与 opacity、测量一次后通过 transform 动画、读写批量处理、优先使用 Scroll/View Timelines 与 IntersectionObserver、will-change 临时且局部使用、模糊动画不超过 8px、不连续动画化模糊、视图过渡仅用于导航级变化、不迁移动画库等。

使用方式:输入 /fixing-motion-performance 可对当前会话中的任意 UI 动画工作应用这些约束;输入 /fixing-motion-performance <file> 可针对文件按全部规则审查,并报告违规行或片段、原因(一句话)及具体代码级修复建议。

限制:除非明确要求,否则不迁移动画库;须在现有动画栈内应用规则;不得在同一组件内部分迁移 API 或混用风格。资料未提供具体命令、安装步骤与官方链接之外的扩展信息。