SuperAPI AI 工具集

fixing-motion-performance

前端与建站

查看项目

更新于 10-15 21:41

技能介绍

用途:审计并修复界面动画性能问题,包括布局抖动、合成层属性、滚动联动动画与模糊滤镜等。适用于新增或修改 CSS、WAAPI、Motion、rAF、GSAP 动画,重构卡顿交互,实现滚动触发显示,以及动画化布局、滤镜、遮罩、渐变或 CSS 变量时。

用法:输入 /fixing-motion-performance 可将规则应用到本次会话的所有动画工作;输入 /fixing-motion-performance <文件> 可逐条检查文件并报告:违规的原文片段、原因(一句)、具体代码级修复建议。资料明确要求在现有动画栈内应用规则,不主动迁移动画库,除非用户明确要求。

主要规则按优先级分组:1 关键:禁止同帧内交错布局读写;禁止在大面积或重要区域持续动画化布局;禁止用 scrollTop、scrollY 或 scroll 事件驱动动画;rAF 循环必须有停止条件;禁止混用多个各自测量或修改布局的动画系统。2 关键:动效默认用 transform 与 opacity;仅交互需要时用 JS 驱动;绘制或布局动画仅可用于小块隔离区域;优先降级技法而非直接移除动效。3 测量:只测量一次,批量先读后写,动画期间不重复读布局,布局类效果优先 FLIP。4 滚动:优先 Scroll 或 View Timelines,用 IntersectionObserver 控制可见性与暂停,离屏暂停动画。5 绘制:绘制动画仅限小块隔离元素,不在大容器上动画化高开销属性,不动画化用于 transform、opacity、位置的 CSS 变量及其继承。6 图层:合成器动画需图层提升,will-change 临时且精准使用,避免大量或大尺寸提升图层。7 模糊与滤镜:模糊动画保持小(<=8px),仅用于短时一次性效果,禁止连续或大表面模糊。8 视图过渡:仅用于导航级变化。9 工具边界:未经明确要求不迁移或重写动画库。

限制:资料未说明该技能的收费、价格、支持平台、运行环境与效果数据;动画库迁移、性能实测数值及具体工具验证方式也暂未提供。