gsap-vfx

GSAP VFX — 视觉特效

流程：gsap-setup → gsap-animate → gsap-vfx → gsap-optimise → gsap-test

配套内容：如需使用核心补间动画／时间轴 API，请调用 gsap-core 和 gsap-timeline。本技能仅涵盖视觉特效方案。需要：greensock/gsap-skills

---

1. 故障风格特效

完整的赛博朋克故障特效系统：每 4 秒触发一次、持续 1 秒的爆发效果，包含色差、文字扰乱、抖动和噪点条。完整实现请参阅 references/glitch-effect.md。

---

2. 跑马灯循环（无限滚动）

<div ref="marqueeRef" class="overflow-hidden">
  <div ref="trackRef" class="flex whitespace-nowrap">
    <span v-for="item in [...items, ...items]" :key="item.id">{{ item.text }}</span>
  </div>
</div>

const trackWidth = trackRef.value.scrollWidth / 2
gsap.to(trackRef.value, { x: -trackWidth, duration: 20, repeat: -1, ease: 'none', force3D: true })

// Reverse: gsap.fromTo(track, { x: -trackWidth }, { x: 0, ... })
// Speed-based: duration = trackWidth / pixelsPerSecond

ease: 'none' 至关重要——任何缓动都会导致循环衔接处出现明显卡顿。

---

3. 滚动计数器

代理对象模式——GSAP 为普通对象添加动画，onUpdate 将值写入 DOM。

function animateCounter(el, target) {
  const proxy = { value: 0 }
  gsap.to(proxy, {
    value: target, duration: 2.2, ease: 'power2.out',
    snap: { value: 1 },
    onUpdate() { el.textContent = String(Math.round(proxy.value)) },
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
}
counterRefs.value.forEach(el => animateCounter(el, parseInt(el.dataset.target, 10)))

• snap: { value: 1 } 将数值四舍五入为整数（避免小数闪烁）
• once: true 仅在首次滚动进入视口时触发

---

4. 浮动装饰元素

gsap.to(decorations, {
  y: 'random(-18, 18)', rotation: 'random(-12, 12)', duration: 'random(3, 5)',
  ease: 'sine.inOut', force3D: true,
  repeat: -1, yoyo: true, repeatRefresh: true,
  stagger: { each: 0.4, repeat: -1, yoyo: true },
})

• repeatRefresh: true 会在每个周期重新生成随机值

---

5. 脉冲圆环

gsap.fromTo(ring,
  { scale: 1, autoAlpha: 0.7 },
  { scale: 2.2, autoAlpha: 0, duration: 1.5, repeat: -1, ease: 'power1.out', force3D: true }
)

// Multiple staggered rings
rings.forEach((ring, i) => {
  gsap.fromTo(ring,
    { scale: 1, autoAlpha: 0.7 },
    { scale: 2.2, autoAlpha: 0, duration: 1.5, repeat: -1, delay: i * 0.5, force3D: true }
  )
})

---

6. 方向跑马灯（Observer）

使用官方 GSAP horizontalLoop 辅助函数和 Observer 插件实现的进阶跑马灯。它会根据滚动／滑动改变方向和速度——与上方仅朝一个方向滚动的基础跑马灯不同。

gsap.registerPlugin(Observer)
const tl = horizontalLoop(gsap.utils.toArray('.rail h4'), { repeat: -1, paddingRight: 30 })

Observer.create({
  onChangeY(self) {
    let factor = self.deltaY < 0 ? -2.5 : 2.5
    gsap.timeline({ defaults: { ease: 'none' } })
      .to(tl, { timeScale: factor * 2.5, duration: 0.2, overwrite: true })
      .to(tl, { timeScale: factor / 2.5, duration: 1 }, '+=0.3')
  }
})

完整的 horizontalLoop 辅助函数及 Vue 3 适配方案：请参阅 references/vfx-patterns.md

---

7. 页脚弹跳（MorphSVG + ScrollTrigger 速度）

页脚显示时，SVG 路径会从弧形凸起变为平直，并根据滚动速度调整弹性弹跳效果。

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin)
const down   = 'M0-0.3C0-0.3,464,156,1139,156S2278-0.3,2278-0.3V683H0V-0.3z'
const center = 'M0-0.3C0-0.3,464,0,1139,0s1139-0.3,1139-0.3V683H0V-0.3z'

ScrollTrigger.create({
  trigger: '.footer', start: 'top bottom',
  onEnter: self => {
    const variation = self.getVelocity() / 10000
    gsap.fromTo('#bouncy-path',
      { morphSVG: down },
      { duration: 2, morphSVG: center, ease: `elastic.out(${1 + variation}, ${1 - variation})`, overwrite: true }
    )
  }
})

完整的标记、CSS 和 Vue 3 适配方案：请参阅 references/vfx-patterns.md

---

8. 重复时间轴模式

重复、repeatDelay、yoyo 和 position 参数的参考内容，请参阅 gsap-timeline 技能。

const master = gsap.timeline({ repeat: -1, repeatDelay: 4 })
master.add(glitchBurst, 0)
master.add(rgbFlash, 0)
master.set([el, red], { clearProps: 'all' }, 0.9)

---

反模式

// BAD: marquee with easing — stutter at loop seam
gsap.to(track, { x: -width, repeat: -1, ease: 'power1.inOut' })

// BAD: counter without snap — flickering decimals
gsap.to(proxy, { value: 100, onUpdate() { el.textContent = proxy.value } })

// BAD: no repeatRefresh — same "random" value every cycle
gsap.to(el, { x: 'random(-50, 50)', repeat: -1, yoyo: true })

// BAD: permanent will-change on glitch layers
// BAD: glitch without height lock — CLS on every burst
// BAD: setInterval instead of repeat: -1

---

参考资料

• references/glitch-effect.md — 完整的故障特效实现：RGB 位移、文字扰乱、抖动、噪点条、GPU 生命周期
• references/vfx-patterns.md — 方向跑马灯（Observer + horizontalLoop 辅助函数）和页脚弹跳（MorphSVG + ScrollTrigger 速度）