SuperAPI AI 工具集

gsap-optimise

设计与创作

查看项目

更新于 10-15 22:38

技能介绍

该技能用于 GSAP 动画的性能优化,定位在动画构建之后、测试之前的“性能检查”阶段,内容为优化配方与审计清单;通用性能指导需另行调用 gsap-performance 技能,且需 greensock/gsap-skills 支持。

主要能力与用法:一是 GPU 加速,优先动画 transform 与 opacity,如 x、y、rotation、scale、opacity,避免 left、top、width、height 等触发布局与回流的属性;force3D 可取 "auto"(补间期间 3D、之后 2D,通常最佳)、true(持续 3D,适合反复动画的元素)、false(始终 2D,适合放大的图片以避免模糊)。二是 will-change 管理:滚动驱动或循环动画可用 CSS 的 will-change: transform;交互或反复触发的动画应在 JS 中按需设置,并在完成回调里恢复为 auto。三是高频动画用法:跟随光标用 gsap.quickTo(),逐帧传值用 gsap.quickSetter(),CSS 自定义属性直接使用 style.setProperty()。四是延迟渲染:GSAP 默认 lazy: true,会把首次渲染写入推迟到 tick 末,减少布局抖动;当多个 from()/fromTo() 指向同一属性时,后续应设 immediateRender: false。

审计清单涵盖:GPU 与渲染、高频动画(如 rapid-fire 补间需 overwrite: 'auto')、ScrollTrigger(大批量元素用 ScrollTrigger.batch(),一次性触发用 once: true,响应式布局用 invalidateOnRefresh: true,动态内容后调用 ScrollTrigger.refresh())、清理(补间放入 gsap.context() 或 ctx.add(),卸载时 ctx.revert(),时间线只创建一次并复用播放/反转)以及可访问性(通过 gsap.matchMedia() 尊重 prefers-reduced-motion,无 JavaScript 时内容仍可见)。反模式包括事件处理器内裸写补间、无 overwrite 的快速触发堆叠、动画布局属性、每帧设置 transformPerspective、交互元素长期保留 will-change、每次调用新建时间线、缺少减少动效检查、生产环境遗留 markers。具体版本、安装方式与完整 API 细节资料未提供。