10分钟上手 particles.js：让图片「活」起来的粒子化技巧

你是否见过那些鼠标一动就会散开又聚拢的动态粒子背景？是否想过把公司Logo或活动海报也做成这种科技感十足的效果？本文将带你用 particles.js 实现这一功能，无需复杂编程，只需简单配置就能让静态图片变成会呼吸的粒子艺术。

什么是 particles.js？

particles.js 是一款轻量级的 JavaScript 库（仅 11KB），通过 Canvas 技术创建交互式粒子效果。它支持自定义粒子数量、颜色、运动轨迹，甚至可以将图片转换为由粒子组成的动态图像。项目核心文件为 particles.js，官方提供了完整的 demo 示例 供参考。

快速开始：3步实现基础粒子效果

1. 引入库文件

创建 HTML 文件，通过国内 CDN 引入 particles.js：

<!-- 国内加速CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>

2. 配置粒子参数

创建配置文件 demo/particles.json，基础结构如下：

{
  "particles": {
    "number": {
      "value": 80,  // 粒子数量
      "density": {
        "enable": true,
        "value_area": 800  // 粒子密度
      }
    },
    "color": {
      "value": "#ffffff"  // 粒子颜色
    },
    "shape": {
      "type": "circle"  // 粒子形状：circle/edge/triangle
    }
  }
}

3. 初始化粒子系统

添加初始化脚本：

particlesJS('particles-js', {
  "particles": {
    "number": {"value": 120},
    "color": {"value": "#ff0000"},
    "shape": {"type": "circle"},
    "move": {"speed": 2}
  }
});

核心功能：图片粒子化实战

准备工作

确保图片路径正确，建议使用透明背景的 PNG 图片以获得最佳效果。项目 demo 中提供了默认配置文件 demo/particles.json，可直接修改使用。

关键配置项解析

参数路径	作用	示例值
particles.shape.type	粒子形状	"image"
particles.shape.image.src	粒子图片路径	"assets/logo.png"
particles.shape.image.width	粒子宽度	50
particles.shape.image.height	粒子高度	50

完整配置示例

{
  "particles": {
    "shape": {
      "type": "image",
      "image": {
        "src": "your-image.png",
        "width": 30,
        "height": 30
      }
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none"
    }
  }
}

实现原理

particles.js 通过 particles.js 第 380-393 行的代码逻辑，将图片分解为多个粒子：

1. 加载图片资源
2. 根据图片像素分布生成粒子
3. 应用运动和交互规则

高级技巧：打造个性化粒子效果

调整粒子交互行为

修改 demo/particles.json 中的 interactivity 配置：

"interactivity": {
  "events": {
    "onhover": {
      "enable": true,
      "mode": "grab"  // 鼠标吸引粒子
    },
    "onclick": {
      "enable": true,
      "mode": "push"  // 点击添加粒子
    }
  }
}

实现粒子颜色渐变

通过 RGB 数组设置多色粒子：

"color": {
  "value": ["#ff0000", "#00ff00", "#0000ff"]
}

性能优化建议

• 粒子数量控制在 100-300 之间
• 关闭不必要的动画效果："anim": {"enable": false}
• 启用视网膜适配："retina_detect": true

常见问题解决

图片不显示怎么办？

1. 检查图片路径是否正确
2. 确保服务器支持跨域访问
3. 尝试将图片转换为 base64 格式嵌入

粒子运动卡顿？

修改 particles.js 第 76 行的速度参数：

"speed": 1,  // 降低速度值
"direction": "none"  // 取消定向运动

项目资源与扩展

• 官方配置文档：README.md
• 示例代码：demo/js/app.js
• 社区模板：bower.json

通过 particles.js，你可以轻松实现从简单背景到复杂图片粒子化的各种效果。现在就打开 demo/index.html，动手调整参数，创造属于你的粒子艺术吧！