gsap-interact 是 GSAP 技能体系中的交互配方合集,属于 gsap-setup → gsap-animate → gsap-interact → gsap-optimise → gsap-test 流程中的交互环节。它只覆盖鼠标驱动的交互动画配方,不涉及 GSAP 核心补间 API(由 gsap-core 提供)或性能方法(由 gsap-performance 提供),并依赖 greensock/gsap-skills。
主要能力包括 3D 倾斜卡片效果:通过 getBoundingClientRect 计算光标相对位置,转换为 rotationX、rotationY 旋转角度,并用弹性缓动回正。所有模式假定已使用 gsap.context() 进行清理。
使用方式上,事件处理相关的补间需注册进 ctx.add,以便统一回收;快速触发的补间应加 overwrite: 'auto';will-change 在动画开始时设置、在 onComplete 中释放;反复动画的元素可设置 force3D: true。清理要点:交互补间都经 ctx.add 注册,onUnmounted 中调用 ctx.revert(),transformPerspective 用 gsap.set 而非逐帧设置,quickTo 实例在 onMounted 中创建,will-change 不得常驻。
还包含参考文件 references/interaction-patterns.md,涵盖 Draggable 配合 liveSnap 编辑 SVG 点、macOS Dock 放大效果等模式。限制方面,本次资料未提供收费、价格、平台支持与效果保证等信息。