用途:GSAP VFX 是 GSAP 视觉特效配方的技能,作为官方 gsap-core 与 gsap-timeline 技能的配套,仅覆盖视觉特效配方,核心 tween/时间线 API 需调用那两个技能。依赖 greensock/gsap-skills。
主要能力与配方:
- 故障效果:赛博朋克风格系统,每 4 秒爆发 1 秒,含色差、打乱、抖动与噪点条,完整实现见 references/glitch-effect.md。
- 跑马灯循环(无限滚动):复制轨道内容,用 x 位移配合 repeat:-1,ease 必须为 'none',否则循环接缝处会卡顿;支持反向与按速度计算 duration 的写法。
- 滚动计数器:使用代理对象,GSAP 动画普通对象,onUpdate 写入 DOM,snap:{value:1} 取整避免小数闪烁,ScrollTrigger 的 once:true 仅首次进入视口触发。
- 浮动装饰:随机 y、rotation、duration,配合 repeatRefresh:true 每轮重新生成随机值。
- 脉冲环:fromTo 缩放与 autoAlpha,支持多个错开延迟的环。
- 方向性跑马灯:使用官方 horizontalLoop 辅助函数与 Observer 插件,依据滚动或滑动改变方向与速度,区别于基础单向跑马灯,完整 helper 与 Vue 3 适配见 references/vfx-patterns.md。
- 页脚弹跳:MorphSVG 与 ScrollTrigger 速度结合,SVG 路径由弧形凸起变形为平直并带弹性回弹,回弹幅度随滚动速度变化。
- 重复时间线模式:glitch、rgbFlash 等可加入 repeat:-1、repeatDelay:4 的 master 时间线。
反模式:跑马灯加缓动、计数器不加 snap、无 repeatRefresh 的随机、glitch 图层永久 will-change、glitch 未锁定高度导致 CLS、用 setInterval 而非 repeat:-1。
限制与完整实现:文中只给出部分代码片段,完整标记、CSS 与 Vue 3 适配需查阅对应 references 文件;未提及收费、价格或安装命令。