SuperAPI AI 工具集

gsap-vfx

设计与创作

查看项目

更新于 10-15 22:38

技能介绍

用途:GSAP VFX 是 GSAP 视觉特效配方的技能,作为官方 gsap-core 与 gsap-timeline 技能的配套,仅覆盖视觉特效配方,核心 tween/时间线 API 需调用那两个技能。依赖 greensock/gsap-skills。

主要能力与配方:

  1. 故障效果:赛博朋克风格系统,每 4 秒爆发 1 秒,含色差、打乱、抖动与噪点条,完整实现见 references/glitch-effect.md。
  2. 跑马灯循环(无限滚动):复制轨道内容,用 x 位移配合 repeat:-1,ease 必须为 'none',否则循环接缝处会卡顿;支持反向与按速度计算 duration 的写法。
  3. 滚动计数器:使用代理对象,GSAP 动画普通对象,onUpdate 写入 DOM,snap:{value:1} 取整避免小数闪烁,ScrollTrigger 的 once:true 仅首次进入视口触发。
  4. 浮动装饰:随机 y、rotation、duration,配合 repeatRefresh:true 每轮重新生成随机值。
  5. 脉冲环:fromTo 缩放与 autoAlpha,支持多个错开延迟的环。
  6. 方向性跑马灯:使用官方 horizontalLoop 辅助函数与 Observer 插件,依据滚动或滑动改变方向与速度,区别于基础单向跑马灯,完整 helper 与 Vue 3 适配见 references/vfx-patterns.md。
  7. 页脚弹跳:MorphSVG 与 ScrollTrigger 速度结合,SVG 路径由弧形凸起变形为平直并带弹性回弹,回弹幅度随滚动速度变化。
  8. 重复时间线模式:glitch、rgbFlash 等可加入 repeat:-1、repeatDelay:4 的 master 时间线。

反模式:跑马灯加缓动、计数器不加 snap、无 repeatRefresh 的随机、glitch 图层永久 will-change、glitch 未锁定高度导致 CLS、用 setInterval 而非 repeat:-1。

限制与完整实现:文中只给出部分代码片段,完整标记、CSS 与 Vue 3 适配需查阅对应 references 文件;未提及收费、价格或安装命令。