用途:指导在项目中完成 GSAP 的安装、插件注册、默认配置与工程化组织,并给出常见最佳实践与易错点,适合动画开发的前期搭建阶段。
主要能力:安装方式分为 npm(npm install gsap,React 集成 npm install @gsap/react,插件随 gsap 包提供)与 CDN 脚本引入(如 https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js,ScrollTrigger、Draggable、Flip 等按需引入)。插件需通过 gsap.registerPlugin() 注册,可一次性或按需动态注册,React 中可注册 useGSAP。全局配置包括 gsap.defaults()、时间线 defaults、ScrollTrigger.config(),以及 ticker.lagSmoothing 与 CustomEase.create。工程组织建议集中式 gsap 配置文件、可复用动画模块、开发与生产环境区分,以及性能检查清单。
使用方式:在项目入口或统一配置文件中注册插件并设置默认值,再导出配置后的实例供组件引用;React 场景使用 useGSAP 并在组件卸载时自动清理,选择器可用 gsap.utils.selector 或 scope 限定范围。
适用场景:网页与组件动画、滚动触发效果、拖拽、SVG 动画、响应式动画(matchMedia)等前端动效开发。
限制与注意:插件未注册会导致功能不生效;注意 tree-shaking 需用命名导出;避免重复注册与重复动画冲突;需清理动画防止内存泄漏;低端设备避免复杂 ease 与过多滤镜;DOM 变化后需刷新 ScrollTrigger。价格、授权及平台支持等资料暂未提供。