gsap-performance

gsap-performance 技能概览

gsap-performance 技能是面向 GSAP 的性能指导集合，目标是让动画更快、更顺滑，更不容易出现卡顿。它最适合你已经明确动画目标，但需要在 Frontend Development 中帮助选择成本最低的实现方式时使用。它的核心任务，是在可能的情况下把运动留在 compositor 上，避免 layout thrashing，并减少会拖垮 60fps 的重绘型工作。

谁适合使用 gsap-performance

如果你正在调优现有的 GSAP 动画、审查一个动效密集的 UI，或者判断某个提议中的动画是否适合上线，就该使用 gsap-performance 技能。它非常适合前端工程师、UI 开发者，以及需要性能感知答案而不是泛泛动画建议的 AI 辅助编码流程。

它能帮你做哪些判断

这个技能可以帮助你在基于 transform 的运动和基于 layout 的运动之间做选择，理解 will-change 什么时候有用，以及识别何时需要把读写操作批量处理起来。也正因为如此，gsap-performance 在真正的问题不是“怎么做动画”，而是“怎么做动画才不会掉帧”时尤其有价值。

它在 GSAP 技术栈中的位置

gsap-performance 最好和 gsap-core 搭配，用于基础动画构建；如果涉及滚动驱动的动效，则与 gsap-scrolltrigger 一起使用效果更好。若你的问题更偏向 timeline 结构或编排，而不是运行时成本，那么其他 GSAP 技能可能更适合作为第一站。

如何使用 gsap-performance 技能

在正确的上下文中安装

对于基于目录的技能配置，可使用以下命令安装：

npx skills add greensock/gsap-skills --skill gsap-performance

在你真正需要动画指导的项目中执行 gsap-performance install 这一步，然后在起草、审查或重构动效代码时应用该技能。如果你同时维护多个应用，就把它装在那个对性能最敏感的动画工作负载所在的项目里。

用性能导向的提示词来调用技能

gsap-performance usage 模式在你提供动画目标、被动画化的属性、运行环境和症状时效果最好。弱提示词会说“让它更顺滑一点”；更强的提示词会这样写：“优化这个 GSAP 入场动画，让它在 mobile Safari 上更流畅；它现在在动画 top 和 width，我需要用更低的 layout 成本实现同样效果。”

有用的提示词要素包括：

• 元素类型和数量，例如一个卡片、很多列表项，或者完整的 hero 区块
• 当前正在动画的属性
• 浏览器或设备上的顾虑
• 可见问题，例如卡顿、延迟、滚动抖动或掉帧
• 任何约束，例如不能改 markup，或者不能改变视觉效果

按实用顺序阅读技能文件

先看 SKILL.md，因为这里包含了该技能围绕的决策规则。若是以安装和选型为导向的阅读，优先看“何时使用该技能”、“transform 和 opacity 的选择”、“will-change”以及“批量处理读写”这些部分。如果你是在比较多个技能，也建议顺手浏览相关 GSAP 指南，避免让 gsap-performance 去解决它并不负责的 timeline 设计问题。

按核心工作流落地

使用这个技能时，关键是把动效目标转换成更便宜的渲染工作：

1. 在视觉效果允许的前提下，把会触发布局的动画属性替换为 transform。
2. 淡入淡出使用 opacity，不要去动画会产生绘制成本的几何属性。
3. 只有真正会动的元素才添加 will-change: transform;。
4. 避免在同一条高频路径里交替进行 DOM 读取和写入。
5. 不要只在桌面版 Chrome 上测试；要在你支持的最慢设备或浏览器上重新验证。

gsap-performance guide 在你已经有一个草案动画、但需要在不改变外观的前提下把它做得更省成本时最有帮助。

gsap-performance 技能 FAQ

gsap-performance 只适用于 Frontend Development 吗？

是的，它最相关的场景就是前端。这个技能面向浏览器渲染行为、DOM 动画成本和 UI 流畅度。如果你的工作是服务端、纯数据处理，或者与运行时动画无关，这个技能通常并不匹配。

它和普通提示词有什么不同？

普通提示词可能只会泛泛建议“用 transforms”，而 gsap-performance 提供的是更可靠的 GSAP 动效决策路径。当地你需要的是实际权衡，比如是否值得通过切换到 transforms 来保留设计效果，或者某个 layout 改动值不值得，它就特别有用。

初学者需要先精通 GSAP 吗？

不需要，但你得有一个明确的动画目标。只要你能说清楚元素、运动方式和痛点，这个技能就很好用。如果你还在学习 GSAP 基础，最好把它和 gsap-core 搭配使用，而不是指望 gsap-performance 从零教你动画语法。

什么时候不该用 gsap-performance？

如果问题根本不是性能，或者主要矛盾是编排、顺序控制、滚动逻辑，而不是渲染成本，那就先不要用它。如果你需要的是完整的视觉动画规格，它也不是首选；它最擅长的是优化与实现建议，而不是创意方向。

如何提升 gsap-performance 技能效果

给出更清晰的前后目标

gsap-performance 最好的结果来自明确约束：哪些视觉效果必须保持不变，哪些可以调整，以及哪类设备最关键。比如，“保留卡片揭示的风格，但消除 layout shift 并减少 mobile Safari 卡顿”就比“让它更快”更可执行。

把真正的瓶颈说出来

常见的失败模式，是让技能去优化错的东西。如果瓶颈其实是阴影过重、模糊半径过大、动画元素太多，或者 scroll handler 太耗费性能，就要明确说出来。你识别成本越精确，gsap-performance usage 给出的建议就越有用。

用具体测试案例反复迭代

拿到第一次输出后，先在最小可复现案例上验证，再逐步放大。如果动画在单个元素上没问题，但放到 30 个列表项时就失败了，就应该继续要求批处理、分段执行，或者修改能降低每帧工作量的属性。gsap-performance skill 的价值，恰恰不在于发明动画，而在于让真实版本足够安全，可以上线。