SuperAPI AI 工具集

gsap-master

前端与建站

查看项目

更新于 10-15 22:10

技能介绍

用途:以生产级标准实现网站交互动效,强调性能(避免布局抖动、保持 60fps、优化指针交互)、可维护性(时间线架构、模块化函数、清晰标签)、无障碍(prefers-reduced-motion、焦点可见)和框架安全(React/Next.js 卸载清理、避免重复触发)。

主要能力:核心 Tween/Timeline 与工具函数;缓动、交错、关键帧、modifiers。插件覆盖滚动类 ScrollTrigger、ScrollTo、ScrollSmoother、Observer;交互类 Flip、Draggable、InertiaPlugin;文本类 SplitText、ScrambleText、TextPlugin;SVG 类 DrawSVG、MorphSVG、MotionPath;物理与缓动类 Physics2D、PhysicsProps、CustomEase、CustomWiggle、CustomBounce、EasePack;调试用 GSDevTools;渲染类 PixiPlugin、EaselPlugin;React 集成 useGSAP()。

使用方式:用 gsap.to/from/fromTo/set 定义补间,复杂动效优先用 timeline 与位置参数;滚动动画用 scrollTrigger 配置,列表用 ScrollTrigger.batch();响应式与无障碍用 gsap.matchMedia() 分区;指针交互用 gsap.quickTo 或 quickSetter;React 中用 gsap.context() 或 useGSAP 并在卸载时 revert。

适用场景:滚动叙事、固定与 scrub、水平滚动、手势导航、布局切换、拖拽惯性、文本字符/词/行揭示、打字与解码效果、SVG 路径绘制与形变、物理粒子运动等。

限制:插件使用前需 registerPlugin;ScrollSmoother 需要指定 wrapper 与 content 结构,布局变化后要 refresh;ScrollTrigger 标记仅用于开发;SplitText 需在响应式场景 revert;GSAP 官方声明整个库现已免费,但历史部分插件曾为会员专享,技能明确禁止推荐盗版或破解插件。