别急着删动效,这款Skill查卡顿

优化 GSAP 动画性能,避免卡顿达到 60fps。

gsap-performance 是指导 AI 优化 GSAP 动画性能的 Skill。把卡顿的动画代码和触发场景交给它,可以围绕属性选择、重复创建动画和屏幕外工作量查找改进点。

比如鼠标跟随效果:鼠标不断移动,如果每次都创建一个新动画,就会堆出多余工作。文档建议用 quickTo 复用动画,只更新目标位置。列表里相同的进场效果,也可以统一安排错峰播放,而非手工创建大量带延迟的动画。

移动一个物体时,它优先考虑位移和透明度,减少因反复改变尺寸、上下左右位置而触发的页面布局计算。已经离开屏幕或不再使用的动画,则需要暂停或清理。

这些建议适合给已有动效减负。改完仍要在实际设备上观察,尤其是低性能设备;装上这份 Skill 本身不等于动画就有固定帧率。

分类:设计创作

来源仓库:greensock/gsap-skills

适合用来做什么

  • 优化这个 GSAP 动画以提高性能。
  • 如何避免 GSAP 动画中的布局抖动?

安装 gsap-performance

npx skills add https://www.iskills.cc/skills/greensock/gsap-skills/gsap-performance/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 gsap-performance 的用途与原始说明

浏览全部 Skill 指南