Canvas粒子进度条：在开发中添加视觉震撼的动画效果

前端

2023-06-24 22:07:46

Canvas 粒子进度条：让你的进度条闪闪发光

什么是 Canvas 粒子进度条？

在现代软件开发中，进度条是一种必不可少的元素。它们提供了一种直观的方式来可视化任务的进度，让用户随时了解情况。然而，传统的进度条往往过于单调乏味，无法激起用户的兴趣。

Canvas 粒子进度条 是一种利用 Canvas 技术创建的进度条，它通过绘制不断变化的粒子来呈现进度。这些粒子大小、形状、颜色和运动方式都可以根据需要自定义，从而创建出独一无二的、具有视觉吸引力的进度条。

如何创建 Canvas 粒子进度条？

要创建 Canvas 粒子进度条，我们需要：

创建一个 Canvas 元素并将其添加到 HTML 页面中。
获取 Canvas 元素的上下文对象。
使用 Canvas API 绘制粒子。
使用计时器更新粒子位置和状态。
根据进度条的当前值控制粒子的运动。

代码示例：

// 创建 Canvas 元素并将其添加到 HTML 页面中
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 获取 Canvas 元素的上下文对象
const ctx = canvas.getContext('2d');

// 使用 Canvas API 绘制粒子
function drawParticle(x, y, radius, color) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = color;
  ctx.fill();
}

// 使用计时器更新粒子位置和状态
const particles = [];
let timer = null;
function updateParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];
    particle.x += particle.speedX;
    particle.y += particle.speedY;

    if (particle.x < 0 || particle.x > canvas.width) {
      particle.speedX = -particle.speedX;
    }

    if (particle.y < 0 || particle.y > canvas.height) {
      particle.speedY = -particle.speedY;
    }

    drawParticle(particle.x, particle.y, particle.radius, particle.color);
  }

  timer = requestAnimationFrame(updateParticles);
}

// 根据进度条的当前值控制粒子的运动
function updateProgress(progress) {
  const particleCount = Math.floor(progress * 100);

  while (particles.length < particleCount) {
    const particle = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 5 + 1,
      color: `hsl(${Math.random() * 360}, 100%, 50%)`,
      speedX: Math.random() * 2 - 1,
      speedY: Math.random() * 2 - 1,
    };

    particles.push(particle);
  }

  while (particles.length > particleCount) {
    particles.pop();
  }
}

// 初始化进度条
updateProgress(0);

// 启动计时器
timer = requestAnimationFrame(updateParticles);