SuperAPI AI 工具集

gsap

通用与其它

查看项目

更新于 10-16 12:40

技能介绍

用途:在 HyperFrames 合成中编写 GSAP 动画时作为参考,覆盖核心补间方法与时间线用法。

主要能力:核心补间包括 gsap.to()(从当前状态到目标)、gsap.from()(入场)、gsap.fromTo()(显式起止)、gsap.set()(立即应用)。常用 vars 有 duration、delay、ease、stagger、overwrite、repeat、yoyo、回调与 immediateRender(from()/fromTo() 默认 true)。属性使用 camelCase;变换优先用别名 x/y/z、xPercent/yPercent、scale、rotation、rotationX/Y、skewX/Y、transformOrigin,透明度优先 autoAlpha,支持 CSS 变量、方向旋转(如 360_cw)、clearProps 与相对值(+=20)。缓动含 power1–power4、back、bounce、circ、elastic、expo、sine 及 .in/.out/.inOut;可用 gsap.defaults() 设默认值,支持函数式取值与 tween 的 pause/play/reverse/kill/progress/time 控制,gsap.matchMedia() 可按媒体查询与 prefers-reduced-motion 响应式且自动回退。

时间线:gsap.timeline() 支持 defaults、paused、repeat、yoyo;位置参数支持绝对值、相对值(+=0.5、-=0.2)、标签与对齐(<、>、<0.2);addLabel() 加标签,支持嵌套时间线(master.add(child))与播放控制 play/pause/reverse/restart/time/progress/kill。

性能:优先动画 transform 和 opacity,避免 width/height/top/left;will-change 仅用于实际动画元素;频繁更新用 gsap.quickTo();用 stagger 替代多个手动延迟补间;清理离屏动画。

限制与注意:同一属性+元素的后续补间应设 immediateRender:false 以避免覆盖;不要在同一 SVG 元素同时使用 svgOrigin 和 transformOrigin;不要在 DOM 存在前创建补间;不用的补间应 kill。effects.md 按需加载。资料未提供安装命令、许可、价格与版本信息。