SuperAPI AI 工具集

gsap-optimise

前端与建站

查看项目

更新于 10-16 09:03

技能介绍

GSAP Optimise 是 GSAP 动画工作流中的性能优化环节,用于在动画构建完成后对动画进行性能审计与改进。其流程定位为:gsap-setup → gsap-animate → gsap-optimise → gsap-test。该技能只覆盖优化配方与审计清单,通用 GSAP 性能指导需调用配套的 gsap-performance 技能,并依赖 greensock/gsap-skills。

一、用途 该技能用于在动画构建(gsap-animate)之后执行性能优化,对已有 GSAP 动画进行审计并提升性能,是官方性能技能的配套补充。

二、主要能力

  1. GPU 加速:推荐使用 GPU 合成的属性(x、y、rotation、scale、opacity),避免触发布局/重排的属性(left、top、width、height)。并说明 force3D 的三种取值行为与适用场景:"auto" 在补间期间使用 3D、之后回到 2D,为默认值,通常最佳;true 永久保持 3D,适用于反复动画的元素;false 始终 2D,适用于放大图片(避免模糊)。
  2. will-change 管理:对于持续动画的元素(滚动驱动、循环)可使用 CSS will-change: transform;对于交互式/重复动画,应在 JS 中管理,示例中通过 applyEffect 设置 willChange = 'transform',并在 resetEffect 的 onComplete 中恢复为 'auto'。
  3. 高频动画:建议使用最合适的工具——补间光标跟踪使用 gsap.quickTo(),逐帧值传递使用 gsap.quickSetter(),CSS 自定义属性使用直接的 style.setProperty()。quickTo、quickSetter 与 piping API 的详细参考见 gsap-performance 技能。
  4. 懒渲染:GSAP 将首次渲染写入推迟到 tick 末尾,避免布局抖动,默认 lazy: true。当多个 from()/fromTo() 针对同一属性时,应在后续调用上设置 immediateRender: false。
  5. 反模式识别:列出应避免的写法,包括事件处理器中裸用 gsap.to 导致孤立补间、快速触发且未设置 overwrite 导致补间堆积、动画布局属性触发重排、每帧设置 transformPerspective(应使用 gsap.set 设置一次)、交互元素上永久 will-change、每次调用都新建 timeline(应创建一次并播放/反转)、缺少 reduced motion 检查、生产环境遗留 markers。
  6. 性能审计清单:分为四类。GPU 与渲染:仅动画 transform/opacity(不使用 left/top/width/height)、反复动画元素设置 force3D: true、will-change 按场景管理(滚动驱动用 CSS、交互用 JS)、使用 autoAlpha 代替 opacity。高频:所有快速触发补间设置 overwrite: 'auto'、重复动画更新使用 quickTo()、逐帧值传递使用 quickSetter()。ScrollTrigger:大型网格(50+ 元素)使用 ScrollTrigger.batch()、一次性触发器设置 once: true、响应式布局设置 invalidateOnRefresh: true、动态内容后调用 ScrollTrigger.refresh()。清理:所有补间放在 gsap.context() 或 ctx.add() 中、在 onUnmounted 中调用 ctx.revert()、timeline 创建一次并播放/反转。无障碍:通过 gsap.matchMedia() 尊重 prefers-reduced-motion、内容在无 JavaScript 时可见。

三、使用方式 该技能以配方和清单形式提供,需在动画构建完成后应用。使用前需具备 greensock/gsap-skills 依赖,通用性能问题应调用 gsap-performance 技能。

四、适用场景 适用于使用 GSAP 构建动画后需要性能审计与优化的前端项目,尤其是涉及滚动驱动动画、高频交互动画、大型元素网格和响应式布局的场景。

五、限制 该技能仅覆盖优化配方与审计清单,不包含通用 GSAP 性能指导(需调用 gsap-performance);依赖 greensock/gsap-skills。关于收费、价格、平台支持等具体信息,资料中暂未提供。