用途:提供鼠标/指针驱动 GSAP 动画的生产级配方,属于 gsap-cookbook 技能链中的一环,流程为 gsap-setup → gsap-animate → gsap-cursor → gsap-optimise → gsap-test。核心 tween API 需调用 gsap-core,性能方法需调用 gsap-performance,依赖 greensock/gsap-skills;所有模式假定已用 gsap.context() 做清理。
主要能力:
- 磁性按钮:用 gsap.quickTo 预编译 tween,频繁更新时比 gsap.to 快 50-250%,根据指针相对元素中心位置乘系数更新 x/y。
- 粒子拖尾:基于距离阈值用 gsap.ticker.add 生成粒子,配合对象池与 gsap.utils.wrap 循环复用,粒子在光标处重新出现并做缩放、淡出动画。
- 弹性跟随:多个斑点以不同 duration 追逐光标,使用 elastic.out 缓动与 overwrite:'auto',静止位置按容器宽度百分比计算。
- 聚光灯光标:动画化 clipPath 圆形跟随光标,初始状态设为 circle(0px at 50% 50%) 以干净还原。
- 光标跟踪图片预览:悬停列表项时图片跟随光标,首次进入时用双参数 snap 避免插值延迟,配合暂停的 autoAlpha tween 控制显隐。
- 透视倾斜:父级 perspective:650,子元素通过 gsap.quickTo 与 gsap.utils.interpolate 做 rotationX/Y 及位移,形成视差深度。
使用方式:在 onMounted 中创建 quickTo 实例,事件处理器内仅更新目标值;用 ctx.add('name', fn) 注册每个光标 tween,onUnmounted 调用 ctx.revert();基于 ticker 的效果在清理时调用 gsap.ticker.remove(fn)。
限制与注意事项:每次快速触发 tween 应设 overwrite:'auto' 防止堆叠;will-change 在开始时设置、onComplete 释放,不可长期保留;反复动画元素建议 force3D:true;完整实现(粒子池、斑点配置、聚光灯隐藏动画等)位于 references/cursor-patterns.md,本技能仅覆盖光标效果配方。具体收费、平台与版本要求资料暂未提供。