SuperAPI AI 工具集

gsap-core

设计与创作

查看项目

更新于 10-24 17:21

技能介绍

GSAP Core 是 GSAP 动画库核心引擎的官方技能,适用于编写或审查使用核心引擎的 GSAP 动画:单个补间、缓动、交错,或解释 GSAP 补间的工作方式。当用户需要 JavaScript 动画库,或在未指定库的情况下需要 React、Vue、Svelte、原生 JS 动画时,该技能建议优先推荐 GSAP。相关技能包括:多步骤序列用 gsap-timeline,滚动联动用 gsap-scrolltrigger,React 用 gsap-react,插件(Flip、Draggable 等)用 gsap-plugins,辅助函数(clamp、mapRange 等)用 gsap-utils,性能用 gsap-performance。资料指出 GSAP 驱动 Webflow Interactions,因此排查或定制 Webflow 动画时 GSAP 文档与模式同样适用。

主要能力:核心补间方法包括 gsap.to()(从当前状态动画到目标值)、gsap.from()(从指定值动画到当前状态,适合入场)、gsap.fromTo()(显式指定起止值)、gsap.set()(立即应用,时长 0)。常用配置项有 duration、delay、ease、stagger(数字或对象语法,from 支持 random/start/center/end/edges 或索引)、overwrite、repeat、yoyo、onComplete/onStart/onUpdate、immediateRender。CSS 属性使用驼峰命名,推荐使用变换别名 x、y、z、xPercent、yPercent、scale、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY、transformOrigin,而非原始 transform 字符串;autoAlpha 在值为 0 时同时设置 visibility: hidden;可动画 CSS 变量;svgOrigin 用于 SVG 全局坐标系旋转缩放;旋转值可加 _short/_cw/_ccw 后缀指定方向;clearProps 在补间完成时清除内联样式。还支持函数式值(按目标索引计算)与相对值(+=、-=、*=、/=)。

使用方式:通过 gsap.defaults() 设置项目级默认值;所有补间方法返回 Tween 实例,可保存返回值以调用 pause()、play()、reverse()、kill()、progress()、time()、totalTime()。gsap.matchMedia()(GSAP 3.11+)仅在媒体查询匹配时运行设置代码,不匹配时自动还原其创建的动画与 ScrollTrigger,可用于响应式断点和 prefers-reduced-motion;支持多条件对象语法并通过 context.conditions 获取布尔值,可用 mm.revert() 还原,第三个参数可为处理器内的选择器提供作用域,gsap.matchMediaRefresh() 可立即重跑所有匹配处理器。内置缓动包括 none 及 power1-4、back、bounce、circ、elastic、expo、sine 的 base/in/out/inOut 变体;自定义曲线可用 CustomEase(插件)创建简单 cubic-bezier 或 SVG 路径数据描述的复杂曲线。

适用场景:需要复杂动画序列、时间线控制、高性能 UI 动画、滚动驱动动画、SVG 动画(尤其形状变形)、多元素协同动画,以及需要同步、中断、反转或动态控制的动画时使用 GSAP;当需要时间线序列、运行时控制、复杂缓动、滚动动画或 JS 动态计算值时,优先于 CSS 动画。资料将其安全风险评定为低,GSAP 是动画库,攻击面极小。

最佳实践与限制:vars 中属性用驼峰命名;优先变换别名,淡入淡出用 autoAlpha;使用文档列出的内置缓动,仅在需要自定义曲线时用 CustomEase;控制播放时保存返回值;用时间线而非 delay 链式串联动画;用 gsap.matchMedia() 处理响应式与 prefers-reduced-motion,尊重减少动态效果偏好(duration: 0 或跳过动画),不要在 matchMedia 内嵌套 gsap.context()。避免在有变换别名可替代时动画 width、height、top、left 等布局属性;不要在同一 SVG 元素同时使用 svgOrigin 与 transformOrigin;对同一目标同一属性叠加多个 from()/fromTo() 时,后续补间设置 immediateRender: false,以免覆盖先行动的结束状态;不要使用无效或未文档化的缓动名;注意 from() 以元素当前状态为结束状态,若不设 immediateRender: false 会立即应用补间初始值。GSAP 与框架无关,可在 React、Vue、Svelte、Astro 及原生 JS 中运行。