Particles.js：基础知识简介

1. 什么是Particles.js

Particles.js是一个使用JavaScript编写的开源库，可以生成交互式的粒子动画效果。它可以用来创建非常酷的背景效果，可以与多种前端框架一起使用，比如React和Vue。它可以在网站、移动应用或UI设计中应用，以实现更优秀的视觉效果。

Particles.js最初由Vincent Garreau创建，在GitHub上开源发布，可以免费使用。

<!-- 引用Particles.js库 -->

<script src="particles.js"></script>

2. 如何使用Particles.js

2.1 下载Particles.js库

我们需要先在官网上下载Particles.js库：

https://github.com/VincentGarreau/particles.js/

2.2 配置Particles.js

下载好库之后，我们需要在HTML页面中使用以下代码引入库：

<!-- 引用配置文件 -->

<script src="js/particles.js"></script>
<!-- 引用自己的js文件 start -->
<script src="js/main.js"></script>
<!-- 引用自己的js文件 end -->

然后在main.js中我们需要使用下面的代码指定particles.js的config：

// main.js

// particles.js配置
particlesJS('particles-js', 
{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": false
}
);

为了使particles.js生效，我们需要将其应用到一个HTML元素中，比如一个div，设置其id属性为“particles-js”：

<!-- HTML页面 -->

<div id="particles-js"></div>

3. particles.js配置项介绍

3.1 particles 属性

particles属性是用来配置粒子的基本属性。这里我们来介绍几个比较重要的粒子配置项。

number.value 粒子数量设置。

color.value 粒子颜色设置。

shape.type 粒子形状，可以是"circle"、"edge"、"triangle"、"polygon"、"star"、"image"。

opacity.value 粒子透明度设置。

size.value 粒子大小设置。

line_linked.distance 连线距离设置。

move.speed 粒子运动速度设置。

3.2 interactivity 属性

interactivity属性可以使用交互设置粒子的行为。这里我们来介绍几个常用的设置项。

detect_on: "canvas" - 鼠标只在画布上检测，"window" - 鼠标在整个窗口检测

onhover.mode 鼠标悬停时的粒子行为，可以设置为"grab"、"bubble"和"repulse"。

onclick.mode 鼠标点击时的粒子行为，可以设置为"push"和"remove"。

modes.grab 抓取粒子时的行为，可以设置抓取的距离、抓取时的粒子透明度等。

modes.bubble 点击粒子时的气泡样式，包括气泡大小、持续时间、速度、透明度等。

3.3 retina_detect 属性

retina_detect属性可以使粒子看起来更加清晰。如果你需要在高分辨率设备上使用Particles.js，建议设置retina_detect为true，因为它会使粒子在高粒度屏幕上显示更加细致。

4. 结论

Particles.js是一个非常有趣的JavaScript库，它可以在网站上创建非常炫酷的粒子效果。在本文中，我们介绍了Particles.js的基础知识和用法，包括如何使用、如何配置、以及如何设置粒子的行为。如果你对UI设计感兴趣，不妨试试这个库，它可以让你的网站变得更加生动有趣。