用途:GSAP Cursor 聚焦光标和指针驱动的 GSAP 动画配方,是 gsap-core、gsap-performance 官方技能的配套技能,覆盖从 gsap-setup 到 gsap-test 流程中的光标效果环节。
主要能力:
- 磁吸按钮:用 gsap.quickTo 预编译补间,官方称比 gsap.to 频繁更新快 50-250%,按指针相对按钮中心偏移量计算 x/y。
- 粒子拖尾:基于 gsap.ticker 与距离阈值生成粒子,配合对象池和 gsap.utils.wrap 循环复用。
- 弹性跟随:多个 blob 以不同 duration 和 elastic.out 缓动追随光标,overwrite 设为 auto。
- 聚光光标:通过动画 clipPath 圆形跟随指针,揭示隐藏层。
- 光标跟随图片预览:悬停列表项时图片跟随光标,首次进入用双参数 snap 避免插值滞后,配合暂停的 autoAlpha 补间切换可见性。
- 指针驱动透视倾斜:父级设置 perspective,子元素用 quickTo 与 gsap.utils.interpolate 做 rotationX/Y 和位移视差。
使用方式:需 greensock/gsap-skills;所有模式假定已使用 gsap.context() 清理。quickTo 实例应在 onMounted 而非事件处理器中创建;事件处理补间通过 ctx.add 注册;onUnmounted 调用 ctx.revert;ticker 效果需 gsap.ticker.remove。
最佳实践:对每个高频补间设置 overwrite: 'auto' 防止叠加;will-change 在动画开始时设置、onComplete 时释放为 auto;反复动画元素设置 force3D: true。
限制:本技能只涵盖光标效果配方,不含 GSAP 核心补间 API 与性能方法,需分别参考 gsap-core 和 gsap-performance;完整实现见 references/cursor-patterns.md。资料未提供具体安装命令、收费信息或运行环境版本。