HTML怎么添加粒子动画？-html教程-PHP中文网

HTML怎么添加粒子动画？

小老鼠

发布： 2025-07-02 15:13:01

原创

1017人浏览过

使用html的<canvas>元素作为容器；2. 通过css设置样式；3. 利用javascript控制粒子生成、运动与绘制；4. 可添加交互功能，如鼠标事件改变粒子属性；5. 优化性能可通过减少粒子数量、使用requestanimationframe、避免频繁重绘等方法；6. 更复杂效果可结合不同形状、纹理、力场、颜色渐变及音频可视化实现。

HTML怎么添加粒子动画？

HTML添加粒子动画，简单来说，就是利用HTML结构、CSS样式和JavaScript脚本，在网页上创造出动态的粒子效果。核心在于用JS控制粒子的运动和属性变化。

解决方案：

首先，我们需要一个HTML容器来承载粒子动画。这通常是一个<canvas>元素，因为它提供了高性能的图形渲染能力。

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

接下来，使用CSS设置<canvas>元素的样式，例如尺寸和背景颜色。

#particleCanvas {
  width: 100%;
  height: 500px;
  background-color: #111;
}

登录后复制

然后，关键部分来了，用JavaScript来控制粒子的生成、运动和绘制。这需要用到 Canvas API。

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

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

let particlesArray;

// 创建粒子
class Particle {
  constructor(x, y, directionX, directionY, size, color) {
    this.x = x;
    this.y = y;
    this.directionX = directionX;
    this.directionY = directionY;
    this.size = size;
    this.color = color;
  }
  // 绘制单个粒子
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  // 更新粒子位置
  update() {
    if (this.x > canvas.width || this.x < 0) {
      this.directionX = -this.directionX;
    }
    if (this.y > canvas.height || this.y < 0) {
      this.directionY = -this.directionY;
    }
    this.x += this.directionX;
    this.y += this.directionY;
    this.draw();
  }
}

// 创建粒子数组
function init() {
  particlesArray = [];
  let numberOfParticles = (canvas.height * canvas.width) / 9000;
  for (let i = 0; i < numberOfParticles; i++) {
    let size = (Math.random() * 5) + 1;
    let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
    let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
    let directionX = (Math.random() * 5) - 2.5;
    let directionY = (Math.random() * 5) - 2.5;
    let color = 'rgba(255,255,255,0.8)';

    particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
  }
}

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, innerWidth, innerHeight); // 清除画布
  for (let i = 0; i < particlesArray.length; i++) {
    particlesArray[i].update();
  }
  // 连接粒子 (可选)
  connect();
}

// 连接粒子
function connect() {
  let opacityValue = 1;
  for (let a = 0; a < particlesArray.length; a++) {
    for (let b = a; b < particlesArray.length; b++) {
      let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x))
                      + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y));
      if (distance < (canvas.width/7)*(canvas.height/7)) {
        opacityValue = 1 - (distance/20000);
        ctx.strokeStyle='rgba(255,255,255,' + opacityValue + ')';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
        ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
        ctx.stroke();
      }
    }
  }
}

// 调整窗口大小
window.addEventListener('resize', function(){
  canvas.width = innerWidth;
  canvas.height = 500;
  init();
});

// 鼠标离开时
window.addEventListener('mouseout', function(){
  mouse.x = undefined;
  mouse.y = undefined;
})

// 初始化和启动动画
init();
animate();

登录后复制

这段代码首先获取<canvas>元素和它的2D渲染上下文。然后，定义了一个Particle类，用于表示单个粒子，包括它的位置、大小、颜色和运动方向。init()函数创建粒子数组，animate()函数循环更新每个粒子的位置并重新绘制画布。connect()函数则用于连接距离较近的粒子，形成更复杂的视觉效果。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

HTML粒子动画的性能优化技巧有哪些？

减少粒子数量： 粒子越多，计算量越大。根据实际需求调整粒子数量，避免过度渲染。
使用requestAnimationFrame： requestAnimationFrame 相比 setInterval 或 setTimeout 更能与浏览器的刷新率同步，从而提供更流畅的动画效果，并减少CPU占用。
避免不必要的重绘： 只在粒子位置发生变化时才进行重绘。可以使用 clearRect 清除画布的特定区域，而不是整个画布。
优化粒子计算： 尽量使用简单的数学运算，避免复杂的计算。例如，可以使用查找表来预先计算一些常用的值。
利用硬件加速： CSS transform 属性可以触发硬件加速，从而提高渲染性能。
使用 WebGL： 对于非常复杂的粒子动画，可以考虑使用 WebGL，它提供了更强大的图形渲染能力。但是，WebGL的学习曲线较陡峭。
避免在动画循环中创建对象： 在动画循环中创建对象会导致频繁的垃圾回收，影响性能。应该在循环外部创建对象，并在循环内部重用它们。
减少 DOM 操作： 频繁的 DOM 操作会影响性能。尽量减少 DOM 操作，例如，可以使用 documentFragment 来批量更新 DOM。

如何让粒子动画与用户交互？

要实现粒子动画与用户的互动，可以监听鼠标事件（例如 mousemove、click）或触摸事件（例如 touchstart、touchmove）。根据鼠标或触摸的位置，改变粒子的属性或行为。

const mouse = {
    x: null,
    y: null,
    radius: 150
}

window.addEventListener('mousemove', function(event){
    mouse.x = event.x;
    mouse.y = event.y;
});

// 在 Particle 类的 update 方法中添加交互逻辑
update() {
    // 检测粒子是否足够接近鼠标
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx*dx + dy*dy);
    if (distance < mouse.radius) {
        // 鼠标靠近时的行为
        if (this.size < 40) {
            this.size += 3;
        }
    } else if (this.size > this.minSize) {
        // 鼠标离开时的行为
        this.size -= 0.1;
    }
    if (this.size < 0) {
        this.size = 0;
    }
    // ... 其他更新逻辑
}

登录后复制

这段代码监听 mousemove 事件，并将鼠标的位置存储在 mouse 对象中。然后在 Particle 类的 update 方法中，计算粒子与鼠标之间的距离。如果距离小于某个阈值，就改变粒子的属性（例如大小）。

如何实现更复杂的粒子动画效果？