概述

一种在鼠标移动轨迹上持续生成并扩散波纹的 交互动画（Cursor Ripple Effect）。

其核心特征是：

• 鼠标经过的位置产生圆形波纹；
• 波纹半径逐帧扩大、透明度逐帧降低直至消失；
• 多个波纹可同时存在，形成拖尾感；
• 整个过程通过 requestAnimationFrame 与鼠标移动保持同步。

技术原理

pointermove → 获取指针坐标 → 创建 Ripple 实例 → 加入数组
    → requestAnimationFrame 循环：
        radius += speed
        opacity -= fade
    → Canvas 逐帧重绘
    → opacity ≤ 0 时移除

Canvas 实现（推荐方案）

Ripple 数据结构

interface Ripple {
  x: number
  y: number
  radius: number
  opacity: number
}

核心代码

const ripples: Ripple[] = []

canvas.addEventListener("pointermove", (e) => {
  ripples.push({ x: e.clientX, y: e.clientY, radius: 0, opacity: 1 })
})

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  for (let i = ripples.length - 1; i >= 0; i--) {
    const r = ripples[i]
    r.radius += 2          // 扩散速度
    r.opacity -= 0.015     // 淡出速度

    if (r.opacity <= 0) {
      ripples.splice(i, 1)
      continue
    }

    ctx.beginPath()
    ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2)
    ctx.strokeStyle = `rgba(74, 103, 65, ${r.opacity})`  // 主色绿
    ctx.lineWidth = 1.5
    ctx.stroke()
  }

  requestAnimationFrame(animate)
}
animate()

关键参数

参数值作用radius += 2扩散速度越大波纹扩散越快opacity -= 0.015淡出速度越小波纹存在越久lineWidth1.5波纹线条粗细strokeStylergba(...)波纹颜色

Canvas vs WebGL

维度CanvasWebGL (Three.js + Shader)性能优秀，支持大量波纹极强，GPU 加速视觉效果圆形波纹真实液体扰动、折射、流体模拟开发复杂度低高（需 Shader 知识）适用场景普通官网、创意官网高端视觉项目、艺术化展示

适用场景

• 品牌官网的鼠标交互增强
• 创意工作室 / 作品集网站
• 游戏宣传页的氛围营造
• 任何需要”水/流体”隐喻的交互

行业名称速查

• Cursor Ripple Effect / Mouse Ripple Effect
• Interactive Cursor Effect / Fluid Cursor Effect
• Cursor Trail Effect / Pointer Feedback Animation

‍