用途:GSAP Interact 是一套面向鼠标驱动交互式动画的生产配方技能,属于 GSAP 技能流程 gsap-setup → gsap-animate → gsap-interact → gsap-optimise → gsap-test 中的交互环节。它只覆盖交互配方,核心补间 API 需调用 gsap-core,性能方法需调用 gsap-performance,并依赖 greensock/gsap-skills。
主要能力:以 3D 倾斜卡片为例,通过 getBoundingClientRect 计算光标相对位置(xPct、yPct),再用 gsap.set 设置 transformPerspective 与 force3D,配合 ctx.add('applyTilt') 与 ctx.add('resetTilt') 实现悬停倾斜与弹性复位。需配套 CSS:.tilt-wrapper { perspective: 1000px; } 与 .tilt-shell { transform-style: preserve-3d; }。
最佳实践:所有事件处理补间必须放在 ctx.add 内以便清理;每个高频补间都要使用 overwrite: 'auto';will-change 在动画开始时设置、在 onComplete 中释放;对反复动画的元素设置 force3D: true;quickTo 实例应在 onMounted 创建而非在事件处理器内;transformPerspective 通过 gsap.set 一次性设置而非逐帧;在 onUnmounted 调用 ctx.revert()。
限制:资料未提供付费、价格、平台与具体效果保证等信息;所有模式均假定已实施 gsap.context() 清理;参考资料见 references/interaction-patterns.md,涵盖使用 liveSnap 的 SVG 点编辑与 macOS Dock 放大效果。