JavaScript+Canvas实现带跳动效果的粒子动画

2023-03-14 14:26

短信预约 -IT技能 免费直播动态提醒

前言

用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画。会用到 Canvas 的2D渲染上下文，通过 JavaScript 编写绘图代码，实现画布上一系列粒子的随机运动和相互作用。还会使用 CSS3 动画属性，使得画布背景颜色和粒子颜色能够流畅地过渡，达到更加自然的效果。

代码运行效果在底部

实现过程

1.创建 Canvas 元素，并获取其上下文

在实现粒子跳动动画的过程中，第一步需要创建一个 Canvas 元素，并获取其上下文。Canvas 元素是 HTML5 中的一个重要组件，它提供了一个可以通过 JavaScript 编写绘图代码的区域，可以用来实现各种各样的动画效果。获取 Canvas 上下文后，可以在其中绘制各种图形，并对它们进行操作，例如填充颜色、添加动画等等。因此，在实现任何 Canvas 动画之前，首先需要创建 Canvas 元素，并获取其上下文。

//创建Canvas元素并获取其上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.getElementById('app').appendChild(canvas)
document.body.style.backgroundColor="black";

2.设置 Canvas 元素的宽高

为了设置 Canvas 元素的宽高，需要在 HTML 代码中添加相应的属性。这些属性可以是 width 和 height，也可以是 style 属性。其中，width 和 height 属性可以指定 Canvas 元素的宽度和高度，而 style 属性可以使用 CSS 样式来定义元素的宽度和高度。为了确保 Canvas 元素在不同设备上显示的效果稳定，建议使用百分比来定义宽度和高度。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3.创建一个粒子类，包含位置、速度、半径等属性，并实现绘制方法

我们需要先创建一个粒子类，该类应该包含位置、速度、半径等属性，并且我们可以根据需要添加更多的属性。在创建该类之后，我们需要实现其绘制方法。

为了实现更好的代码复用性和可维护性，我们可以将粒子类设计为可扩展的，例如，我们可以添加颜色、质量、生命周期等属性。此外，我们还可以实现一些其他的方法，例如更新位置、重置粒子状态等等。

如果我们正在开发一个粒子系统，我们可以使用该粒子类来创建和管理粒子。我们可以在屏幕上绘制多个粒子，每个粒子都有其自己的属性和状态。我们还可以通过修改粒子的属性来实现不同的效果，例如改变粒子的速度、半径等等。

总之，创建一个可扩展的粒子类可以为我们的代码提供更好的复用性和可维护性，并且可以为我们的项目带来更多的灵活性和创造性。

class Particle {
  constructor(x, y, radius, color) {
    // 粒子的位置坐标
    this.x = x;
    this.y = y;
    // 粒子的半径和颜色
    this.radius = radius;
    this.color = color;
    // 粒子的下落速度
    this.speed = 4;
  }

  draw() {
    // 绘制一个圆形粒子
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
}

4.创建粒子实例数组，并初始化

在创建粒子实例数组之前，需要确定粒子的类型和数量。可以通过定义粒子系统的属性来实现，例如粒子的大小、速度、颜色等。在初始化过程中，可以对每个粒子的属性进行设置，以确保它们在场景中的显示效果符合预期。此外，还可以添加粒子之间的相互作用，以增强场景的真实感和动态性。

const particles = [];
const particleCount = 100;

for (let i = 0; i < particleCount; i++) {
  // 随机生成粒子的位置、大小和颜色
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const radius = Math.random() * 5 + 1;
  const color = 'white';

  // 将粒子实例添加到数组中
  particles.push(new Particle(x, y, radius, color));
}

5.实现粒子的动画效果

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

  particles.forEach(particle => {
    particle.y += particle.speed; // 粒子下落速度

    if (particle.y > canvas.height + particle.radius) { // 判断粒子是否超出屏幕
      particle.y = -particle.radius;
    }

    particle.draw(); // 绘制粒子
  });
}

animate();

该段代码实现了粒子动画的主要逻辑。通过 requestAnimationFrame 方法实现动画的流畅性，每次调用 animate 函数都会清空画布，然后更新每个粒子的位置，绘制粒子。其中，粒子下落速度由 speed 属性决定，而粒子是否超出屏幕则是根据其位置和半径计算得出的。最终，我们调用 animate 函数开始绘制动画。