SuperAPI AI 工具集

gsap-cursor

前端与建站

查看项目

更新于 10-15 22:38

技能介绍

用途:GSAP Cursor 聚焦光标和指针驱动的 GSAP 动画配方,是 gsap-core、gsap-performance 官方技能的配套技能,覆盖从 gsap-setup 到 gsap-test 流程中的光标效果环节。

主要能力:

  1. 磁吸按钮:用 gsap.quickTo 预编译补间,官方称比 gsap.to 频繁更新快 50-250%,按指针相对按钮中心偏移量计算 x/y。
  2. 粒子拖尾:基于 gsap.ticker 与距离阈值生成粒子,配合对象池和 gsap.utils.wrap 循环复用。
  3. 弹性跟随:多个 blob 以不同 duration 和 elastic.out 缓动追随光标,overwrite 设为 auto。
  4. 聚光光标:通过动画 clipPath 圆形跟随指针,揭示隐藏层。
  5. 光标跟随图片预览:悬停列表项时图片跟随光标,首次进入用双参数 snap 避免插值滞后,配合暂停的 autoAlpha 补间切换可见性。
  6. 指针驱动透视倾斜:父级设置 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。资料未提供具体安装命令、收费信息或运行环境版本。