SuperAPI AI 工具集

gsap-performance

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:用于优化 GSAP 动画性能、调整 ticker 配置、优化 stagger 错开与提升动画帧率,适合复杂特效下保持流畅 60fps。

主要能力:

  • Ticker 与滞后平滑:gsap.ticker.fps()、gsap.ticker.time()、gsap.ticker.delta;gsap.ticker.lagSmoothing(1000, 16)、lagSmoothing(0)、lagSmoothing(500, 33);gsap.ticker.add(callback) 与 gsap.ticker.remove(callback),支持优先级参数。
  • Stagger 优化:stagger: 0.1;带 ease、from、grid: [10, 5] 的错开;避免过小 stagger(如 0.006)。
  • Snap 吸附:snap: 20、snap 数组、含 points/radius/velocity 的对象,以及 delay 调优。
  • Modifiers:gsap.utils.unitize、clamp、pipe 组合处理数值。
  • Keyframes:合并多个 tween,支持 easeEach 与总时长控制。
  • 工具函数:gsap.utils.throttle、debounce、clamp、mapRange、pipe。
  • 优化策略:合并属性、限制活动 tween、使用 timeline、ScrollTrigger.batch 批量处理。
  • 渲染建议:优先使用 transform(x、y、scale)而非 left/top/width/height;少用 filter;合理使用 will-change。
  • ScrollTrigger 性能:toggleActions 替代 scrub、config 配置、批量刷新。
  • 内存管理:完成时 kill timeline、清理引用、SplitText.revert()。
  • FPS 监控与耗时分析:通过 gsap.ticker.add 统计帧率、onComplete 记录动画耗时。

限制:资料为技能说明文档,未提供安装命令、收费与授权信息,使用前需自行具备 GSAP 运行环境;示例代码仅为写法示意,具体效果取决于实际页面与设备。