Confetti五彩纸屑动画：飞书点赞效果一览无余

前端

2023-12-01 11:14:40

使用粒子系统打造炫酷的五彩纸屑动画

在这个色彩斑斓的教程中，我们将踏上一个神奇的旅程，学习如何使用粒子系统、向量和 Canvas 来创造出令人惊叹的五彩纸屑动画。从了解粒子系统的基础知识，到实现优雅的动画效果，我们一步一步地向你展示如何用代码实现魔法。

了解粒子系统

粒子系统就像小精灵的世界，每个精灵都有自己的位置、速度和方向。这些精灵汇聚在一起，形成令人着迷的动画，例如火焰的闪烁、水花的飞溅，以及我们本次的主角：五彩纸屑的飘舞。

使用向量绘制粒子运动

想象一下向量就像数学中的魔法棒，它们可以位置、速度和方向。在我们的动画中，我们将使用向量来让粒子随着时间推移而优雅地移动。向量就像坐标系中的指南针，指引粒子前进的方向和速度。

Canvas：粒子的绘画工具

Canvas 是一个神奇的画布，它允许我们绘制出粒子的视觉效果。就像一个艺术家调色板，我们可以使用 Canvas 的绘图上下文来定义粒子的颜色、形状和位置，将它们栩栩如生地呈现出来。

构建五彩纸屑动画

现在，让我们将所有这些元素融合在一起，打造我们的五彩纸屑动画。我们首先定义粒子的属性，包括位置、速度和方向。然后，我们将这些粒子存储在一个数组中，代表整个粒子系统。

接下来，我们将进入一个无限循环，在每个时间步长更新粒子位置和速度。随着时间的推移，粒子将根据其属性移动和旋转，营造出五彩纸屑在空中飘舞的效果。

最后，我们使用 Canvas 绘制粒子，为它们赋予生动鲜艳的色彩和形状。粒子系统随着时间的推移不断更新，产生令人着迷的五彩纸屑动画。

代码示例

// 创建 Canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 粒子属性
const particleCount = 200;  // 粒子数量
const particleSize = 10;  // 粒子大小
const particleSpeed = 5;  // 粒子速度

// 粒子数组
const particles = [];

// 粒子对象
function Particle(x, y, vx, vy, color) {
  this.x = x;
  this.y = y;
  this.vx = vx;
  this.vy = vy;
  this.color = color;
}

// 初始化粒子数组
for (let i = 0; i < particleCount; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const vx = Math.random() * particleSpeed * 2 - particleSpeed;
  const vy = Math.random() * particleSpeed * 2 - particleSpeed;
  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  particles.push(new Particle(x, y, vx, vy, color));
}

// 更新粒子
function updateParticles() {
  for (let i = 0; i < particleCount; i++) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;

    // 粒子边界处理
    if (p.x < 0 || p.x > canvas.width) {
      p.vx *= -1;
    }
    if (p.y < 0 || p.y > canvas.height) {
      p.vy *= -1;
    }
  }
}

// 绘制粒子
function drawParticles() {
  for (let i = 0; i < particleCount; i++) {
    const p = particles[i];
    ctx.fillStyle = p.color;
    ctx.fillRect(p.x, p.y, particleSize, particleSize);
  }
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateParticles();
  drawParticles();
  requestAnimationFrame(animate);
}

// 开始动画
animate();