用JavaScript创造唯美樱花飞舞动画：打造醉人春景

2023-12-02 15:43:08

用 JavaScript 绘制醉人的樱花飞舞动画

动画画布搭建：

欢迎来到数字艺术的迷人世界！今天，我们将踏上一场创作之旅，用 JavaScript 创造出唯美的樱花飞舞动画，为你的网站或应用增添醉人的春景。首先，我们准备一个 HTML5 画布作为我们的动画舞台，它将容纳我们的樱花粒子。

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

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

粒子属性：

每一朵樱花都是一个粒子，拥有自己的位置、速度和颜色属性。我们用一个粒子类来封装这些属性，就像构建我们樱花世界的蓝图。

class Particle {
  constructor(x, y, vx, vy, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.color = color;
  }
}

绘制粒子：

现在，是时候让我们的樱花粒子在画布上绽放了。我们用 fill() 方法以指定的颜色填充圆形，形成每一朵娇嫩的樱花。

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

粒子运动：

为了让樱花随着微风轻舞，我们需要更新粒子的位置和速度。在每个动画帧中，我们将根据每个粒子的速度将其轻轻移动。

Particle.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
};

粒子生成：

现在，让我们让樱花飘起来！我们在 main() 函数中生成一定数量的粒子，并指定它们的初始位置、速度和颜色。

function main() {
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(x, y, vx, vy, color));
  }
  animationLoop();
}

动画循环：

最后，我们进入动画循环。它持续调用 requestAnimationFrame()，在每个帧中更新和绘制粒子，从而创建樱花飞舞的动画。

function animationLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    particles[i].draw();
    particles[i].update();
  }
  requestAnimationFrame(animationLoop);
}

美化动画：

为动画添加一些修饰，提升它的视觉效果：