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

实现带跳动效果的粒子动画可以使用JavaScript和Canvas，下面是具体步骤：

步骤一：创建画布和粒子对象

首先，在HTML中创建一个canvas画布，并用JavaScript获取该画布对象。然后，定义粒子对象，包括粒子的位置、半径、速度、弹性等属性，以及在画布上绘制粒子的方法。以下是示例代码：

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

class Particle{
  constructor(x, y, r, speedX, speedY, color){
    this.x = x;
    this.y = y;
    this.r = r;
    this.speedX = speedX;
    this.speedY = speedY;
    this.color = color;
    this.bounce = -0.7; // 弹性系数
  }
  draw(){
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
  update(){
    this.x += this.speedX;
    this.y += this.speedY;
    if(this.y + this.r > canvas.height){ // 下落到画布底部时的弹性反弹
      this.y = canvas.height - this.r;
      this.speedY *= this.bounce;
    }
  }
}

步骤二：创建粒子数组

然后，定义一个数组来存储粒子对象，以及初始化该数组，生成一定数量的粒子对象。以下是示例代码：

const particles = [];

function init(){
  const particleNumber = 100;
  for(let i = 0; i < particleNumber ; i++){
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const r = 5 + Math.random() * 10;
    const speedX = -5 + Math.random() * 10;
    const speedY = -10 + Math.random() * 5;
    const color = `hsl(${Math.random() * 360},50%,50%)`;
    const particle = new Particle(x, y, r, speedX, speedY, color);
    particles.push(particle);
  }
}
init();

步骤三：实现画布清除和粒子更新

接下来，定义一个方法来清除画布，并在每一帧更新粒子数组，实现粒子位置的更新和画布的重绘。以下是示例代码：

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

function update(){
  clear();
  particles.forEach((particle)=>{
    particle.update();
    particle.draw();
  });
}

步骤四：设置动画帧和粒子跳动效果

最后，在动画帧中调用update方法，实现动画效果。为了让粒子具有跳动的效果，需要在update方法中添加一个时间因子，使得粒子的y轴方向速度会随时间变化，从而实现跳动效果。以下是示例代码：

function animate(){
  requestAnimationFrame(animate);
  update();
  const time = Date.now() / 1000;
  particles.forEach((particle)=>{
    particle.speedY += Math.sin(time + particle.x) * 0.1;
  });
}
animate();

上述代码中，time是当前时间戳除以1000，得到单位为秒的时间因子；然后，通过sin函数计算出x和time的和值，再乘以0.1，得到y轴方向上的速度变化量，从而实现跳动效果。

示例说明1：增加粒子数量

我们可以增加粒子数量，让动画更加流畅。只需要修改init方法中的particleNumber值即可。

function init(){
  const particleNumber = 200; // 修改粒子数量
  for(let i = 0; i < particleNumber ; i++){
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const r = 5 + Math.random() * 10;
    const speedX = -5 + Math.random() * 10;
    const speedY = -10 + Math.random() * 5;
    const color = `hsl(${Math.random() * 360},50%,50%)`;
    const particle = new Particle(x, y, r, speedX, speedY, color);
    particles.push(particle);
  }
}

示例说明2：修改粒子弹性系数

我们也可以修改粒子的弹性系数，让粒子的跳动效果更加明显。只需要修改Particle类中的bounce值即可。

class Particle{
  constructor(x, y, r, speedX, speedY, color){
    this.x = x;
    this.y = y;
    this.r = r;
    this.speedX = speedX;
    this.speedY = speedY;
    this.color = color;
    this.bounce = -0.9; // 修改弹性系数
  }
}