SuperAPI AI 工具集

fixing-motion-performance

前端与建站

查看项目

更新于 10-16 08:45

技能介绍

用途:审查或修复 UI 动画与交互动效的性能问题,可用于新增或修改 CSS、WAAPI、Motion、rAF、GSAP 动效,重构卡顿的过渡与交互,实现滚动联动或滚动显现,以及动画布局、滤镜、遮罩、渐变或 CSS 变量。

使用方式:输入 /fixing-motion-performance 时,将该技能约束应用到当前对话中的动画工作;输入 /fixing-motion-performance <file> 时,对照规则审查文件并报告违规处(引用具体行或片段)、问题原因(一句话)和具体代码级修复建议。除非明确要求,不迁移动画库,只在现有技术栈内应用规则。

主要规则按优先级分为:绝不使用的模式、机制选择、测量、滚动、绘制、图层、模糊与滤镜、视图过渡、工具边界。核心要求包括:同一帧内不交错读写布局;不在大面积上持续动画布局;不用 scrollTop、scrollY 或滚动事件驱动动画;rAF 循环必须有停止条件;默认使用 transform 和 opacity;先批量测量再用 transform 或 opacity 动画;优先滚动或视图时间线,并用 IntersectionObserver 处理可见性与暂停;模糊动画不超过 8px 且不做持续或大面积模糊;will-change 临时且精准使用;视图过渡仅用于导航级变化。

限制:资料未提供安装方式、收费信息、平台依赖与效果数据;具体判定需结合实际代码与工具验证图层行为。