SuperAPI AI 工具集

gsap

设计与创作

查看项目

更新于 10-15 21:38

技能介绍

用途:GSAP 是高性能 JavaScript 动画库,可对 CSS 属性、SVG、canvas 和 React 组件做动画,并处理跨浏览器差异。注意:本条目已弃用,被官方 GSAP skills 取代(gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-react、gsap-utils、gsap-performance、gsap-frameworks)。

主要能力:核心补间 gsap.to()、gsap.from()、gsap.fromTo();时间线 gsap.timeline() 用于编排多个补间;插件扩展能力,如 ScrollTrigger(滚动动画、固定区块)、Flip、Observer、Draggable,以及付费的 SplitText、DrawSVG、MorphSVG。缓动支持 none、power1 至 power4、back、bounce、circ、elastic、expo、sine,并可加 .in、.out、.inOut。

使用方式:核心包为 gsap;React/Next.js 推荐 gsap 与 @gsap/react,通过包管理器安装。React 中应使用 @gsap/react 的 useGSAP 钩子替代 useEffect,自动处理清理,避免内存泄漏与严格模式重复触发;需先 gsap.registerPlugin(useGSAP)。插件使用前必须注册,例如 gsap.registerPlugin(ScrollTrigger)。建议用 GSAP 快捷属性(x、y、rotation、scale、autoAlpha)代替 transform 或 opacity 字符串。

适用场景:网页交互动画、滚动驱动动画、React 组件动画、SVG 动画等。

限制:部分插件(SplitText、DrawSVG、MorphSVG)为付费;本条目已弃用,应改用官方 GSAP skills;资料未提供具体价格、平台支持范围与性能基准。