SuperAPI AI 工具集

fixing-motion-performance

设计与创作

查看项目

更新于 10-16 08:03

技能介绍

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

用法:输入 /fixing-motion-performance 可将约束应用于当前对话中的所有 UI 动画工作;输入 /fixing-motion-performance <file> 则按规则审查该文件,报告违规处(引用具体行或片段)、原因及代码级修复建议。除非明确要求,不迁移动画库,只在现有技术栈内应用规则。

主要规则按优先级:1 永不模式(关键)——不在同一帧交错布局读写,不在大面积上连续动画化布局,不用 scrollTop/scrollY/scroll 事件驱动动画,rAF 循环必须有停止条件,不混用多个各自测量或改动布局的动画系统;2 选择机制(关键)——默认用 transform 与 opacity,仅在交互需要时用 JS 驱动,绘制或布局动画仅限小面积;3 测量(高)——先测量再用 transform/opacity 动画,批量读后写,优先 FLIP;4 滚动(高)——优先 Scroll/View Timelines,用 IntersectionObserver 控制可见性与暂停,不轮询滚动位置;5 绘制(中高)——绘制型动画仅限小面积,不连续动画化 CSS 变量;6 图层(中)——合成器动画需图层提升,will-change 临时且精准使用,避免过多过大提升图层;7 模糊与滤镜(中)——模糊动画保持小(≤8px),仅作短时一次性效果,不在大面积或持续动画化模糊;8 视图过渡(低)——仅用于导航级变化;9 工具边界(关键)——不擅自迁移或重写动画库,不在同组件内部分迁移或混用风格。

限制:暂未提供具体收费、价格、平台要求与效果保证信息。