使用 JavaScript 添加五彩纸屑效果:有趣的实战指南

想为你的 Web 应用添加庆祝时刻吗?JavaScript 五彩纸屑动画能将普通的交互转变为令人难忘的体验。无论是庆祝成功购买、表单完成还是成就解锁,五彩纸屑都能为用户带来额外的惊喜,让他们印象深刻。

本指南涵盖两种实用方法:从零开始构建轻量级的 HTML Canvas 五彩纸屑效果,以及使用 js-confetti 和 canvas-confetti 等生产就绪的库来实现更快速的部署。

选择你的五彩纸屑实现方式

快速库集成(2 分钟部署)

对于大多数生产应用,成熟的五彩纸屑动画 JavaScript 库在功能和简洁性之间提供了最佳平衡。

js-confetti 以其零依赖架构和表情符号支持脱颖而出:

<!-- CDN 安装 -->
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

// 基本用法
const jsConfetti = new JSConfetti()

// 触发彩色五彩纸屑
jsConfetti.addConfetti({
  confettiColors: ['#ff0a54', '#ff477e', '#ff7096'],
  confettiNumber: 100
})

// 或使用表情符号
jsConfetti.addConfetti({
  emojis: ['🎉', '✨', '💫', '🎊'],
  emojiSize: 50,
  confettiNumber: 30
})

canvas-confetti 提供更多物理效果自定义选项:

<!-- CDN 安装 -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.browser.min.js"></script>

// 从特定原点触发烟花效果
confetti({
  particleCount: 100,
  spread: 70,
  origin: { x: 0.5, y: 0.6 }, // 中心位置,略低于中间
  colors: ['#bb0000', '#ffffff']
})

这两个库都很轻量、维护良好,并且会自动处理清理工作。js-confetti 库在动画完成时返回 Promise,非常适合链式操作:

await jsConfetti.addConfetti()
console.log('庆祝完成!')
// 继续执行下一个操作

构建原生 Canvas 五彩纸屑(零依赖)

如果需要完全控制或对代码体积有严格要求,原生 HTML Canvas 五彩纸屑实现只需最少的代码:

const canvas = document.getElementById('confetti-canvas')
const ctx = canvas.getContext('2d')
const particles = []

// 调整 canvas 大小以适应窗口
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// 创建具有随机属性的粒子
function createParticle() {
  return {
    x: Math.random() * canvas.width,
    y: -10,
    vx: (Math.random() - 0.5) * 2,
    vy: Math.random() * 3 + 2,
    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
    size: Math.random() * 3 + 2
  }
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  particles.forEach((p, index) => {
    p.x += p.vx
    p.y += p.vy
    p.vy += 0.1 // 重力
    
    ctx.fillStyle = p.color
    ctx.fillRect(p.x, p.y, p.size, p.size)
    
    // 移除屏幕外的粒子
    if (p.y > canvas.height) {
      particles.splice(index, 1)
    }
  })
  
  if (particles.length > 0) {
    requestAnimationFrame(animate)
  }
}

// 触发五彩纸屑爆发
function triggerConfetti() {
  for (let i = 0; i < 100; i++) {
    particles.push(createParticle())
  }
  animate()
}

这种方法让你完全控制物理效果、粒子形状和渲染。但是,你需要自己处理清理、性能优化和浏览器兼容性。

五彩纸屑效果的生产最佳实践

尊重用户偏好

在触发五彩纸屑动画 JavaScript 效果之前,始终检查用户的动效敏感度设置:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (!prefersReducedMotion) {
  jsConfetti.addConfetti()
} else {
  // 改为显示静态庆祝消息
  showSuccessMessage()
}

针对移动端性能优化

保持合理的粒子数量以确保移动端流畅体验:

const isMobile = window.innerWidth < 768
const particleCount = isMobile ? 50 : 150

jsConfetti.addConfetti({
  confettiNumber: particleCount
})

庆祝后清理资源

canvas-confetti 会自动处理清理工作。js-confetti 提供 clearCanvas() 方法来重置画布,但它不会取消正在进行的动画。对于原生实现,始终清理资源:

// 对于 js-confetti
jsConfetti.clearCanvas()

// 对于原生实现
function cleanup() {
  particles.length = 0
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

策略性使用模式

五彩纸屑效果最适合保留给真正值得庆祝的时刻:

• ✅ 购买完成
• ✅ 账户创建成功
• ✅ 成就解锁
• ✅ 里程碑达成
• ❌ 每次按钮点击
• ❌ 页面加载
• ❌ 次要交互

实现示例

按钮点击庆祝

document.getElementById('purchase-btn').addEventListener('click', async () => {
  // 首先处理操作
  const success = await processPurchase()
  
  if (success) {
    // 然后庆祝
    jsConfetti.addConfetti({
      confettiColors: ['#00ff00', '#ffffff'],
      confettiNumber: 75
    })
  }
})

基于位置的五彩纸屑

只有 canvas-confetti 支持从精确的屏幕位置触发五彩纸屑。使用 js-confetti 时,五彩纸屑始终填充整个画布,无法控制原点。

// canvas-confetti: 从鼠标点击坐标触发
element.addEventListener('click', (e) => {
  confetti({
    particleCount: 80,
    spread: 70,
    origin: {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight
    }
  })
})

这允许你创建诸如从点击按钮爆发、侧边礼炮或特定位置烟花等效果。

结论

JavaScript 五彩纸屑效果将日常交互转变为难忘时刻。虽然原生 Canvas 实现提供完全控制,但 js-confetti 和 canvas-confetti 等库提供了生产就绪的解决方案,处理了跨浏览器兼容性、性能优化和清理等复杂问题。

当需要快速、可靠且具有良好默认设置的实现时,选择库。当需要精确控制或零依赖时,构建原生实现。无论哪种方式,请记住最好的五彩纸屑是谨慎使用的——将它保留给真正值得庆祝的时刻。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.