炫酷彩色粒子鼠标跟随动画效果(附源代码)

这是一个交互式的彩色粒子动画，主要特点是随着鼠标移动产生五彩缤纷的粒子爆炸效果。通过结合Canvas绘图、事件监听和动画循环，创造了一个流畅、互动性强的视觉体验。
images

实现逻辑

粒子系统：
- 定义Particle类，每个粒子有位置、大小、颜色和速度属性。
- 粒子会随时间缩小并移动。
粒子爆炸效果：
- createExplosion函数在鼠标位置创建多个随机颜色和速度的粒子。
- 使用setInterval定期在鼠标位置创建新的粒子爆炸。
动画循环：
- 使用requestAnimationFrame持续更新和绘制粒子。
- 移除过小的粒子以优化性能。

源代码

<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  #confettiCanvas {
    background-color: #1a202c;
    position: absolute;
    top: 0;
    left: 0;
  }

  .instruction {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
  }
</style>

<canvas id="confettiCanvas"></canvas>
<p class="instruction">鼠标轻轻一动，五彩纷飞！</p>

<script>
  const canvas = document.getElementById("confettiCanvas");
  const ctx = canvas.getContext("2d");
  const colors = ["#FF3F8E", "#04C2C9", "#2E55C1", "#F9D423"];

  let particles = [];
  let mousePos = { x: 0, y: 0 };

  class Particle {
    constructor(x, y, size, color, speedX, speedY) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.speedX = speedX;
      this.speedY = speedY;
    }

    update() {
      this.x += this.speedX;
      this.y += this.speedY;
      this.size *= 0.98; // 粒子逐渐缩小
    }

    draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }
  }

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  function createExplosion(x, y) {
    const particleCount = 50;
    for (let i = 0; i < particleCount; i++) {
      const size = Math.random() * 5 + 2;
      const color = colors[Math.floor(Math.random() * colors.length)];
      const speedX = (Math.random() * 2 - 1) * 2;
      const speedY = (Math.random() * 2 - 1) * 2;
      particles.push(new Particle(x, y, size, color, speedX, speedY));
    }
  }

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

    particles = particles.filter((particle) => {
      particle.update();
      particle.draw();
      return particle.size > 0.5;
    });

    requestAnimationFrame(animate);
  }

  function handleMouseMove(event) {
    mousePos.x = event.clientX;
    mousePos.y = event.clientY;
  }

  resizeCanvas();
  animate();

  window.addEventListener("resize", resizeCanvas);
  canvas.addEventListener("mousemove", handleMouseMove);

  setInterval(() => {
    createExplosion(mousePos.x, mousePos.y);
  }, 50);
</script>