用途:GSAP 是用于网页动画的 JavaScript 库,资料定位为“专业级”动画方案,适用于实现网页动画、时间线编排、滚动触发动画、SVG 动画与布局过渡等场景。
主要能力:提供高性能补间动画(Tween)、时间线(Timeline)精确排序控制、缓动曲线(Ease)、ScrollTrigger 滚动联动,以及可扩展插件体系。核心概念包括 Tween、Timeline、Ease、ScrollTrigger、Plugin。资料列出参考文档主题:速查表、核心补间与回调、缓动、时间线、交错动画、工具函数、ScrollTrigger、ScrollSmoother、SplitText、SVG 插件(DrawSVG、MorphSVG、MotionPath)、Flip 布局动画、React 集成、Observer/Draggable、文本插件(TextPlugin、ScrambleTextPlugin)。
使用方式:安装命令为 npm install gsap,React 钩子为 npm install @gsap/react。插件需在应用入口注册一次,例如 import gsap from 'gsap'、import { ScrollTrigger } from 'gsap/ScrollTrigger',然后 gsap.registerPlugin(ScrollTrigger)。基础用法包括 gsap.to、gsap.from、gsap.fromTo、gsap.set、gsap.timeline 等;时间线可用 '-=0.5' 或 '<' 控制位置。React 中建议使用 useGSAP 钩子并配合 scope 自动清理,或使用 gsap.utils.selector 限定选择器范围。
适用场景:页面加载淡入、列表交错动画、滚动触发动画、模态框等可控播放时间线、SVG 描边与变形、拖拽与手势交互、平滑滚动与视差、布局过渡(FLIP)以及 React 项目中的动画封装。
限制与注意事项:资料强调需先注册插件再使用,否则插件不生效;React 中应在依赖变更时清理动画,避免内存泄漏;同一属性冲突补间可用 overwrite 或 killTweensOf 处理;DOM 或布局变化后需调用 ScrollTrigger.refresh();对尚未存在的元素动画可用 immediateRender: false;from() 会立即渲染初始状态,可能造成闪烁,建议在 CSS 中设定初值或使用 fromTo;选择器默认作用于整页,需限定容器作用域。资料还列出 GSAP 3.13+(2025-04)起 ScrollTrigger、Observer、Draggable、Flip、TextPlugin、ScrollSmoother、SplitText、DrawSVG、MorphSVG、MotionPath、ScrollTo 等在公开 gsap npm 包内以免版税许可提供。其他平台支持、版本差异及具体 API 细节资料未全部展开,以官方文档为准。