介绍
Particles.js是一个库,允许您创建粒子效应. 这些是形状和对象,这些物体被绘制到画布上,可以观察物理和互动的一些行为。
<$>[note] **注:**原来的复制版的开发似乎已经停滞不前。最近创建了一个名为 tsParticles的叉子。
在本教程中,您将简要介绍本库的一些功能,以及加载和修改样本配置。
前提条件
要完成本教程,您将需要:
- 现代网页浏览器
- 熟悉 JSON 可能有助于理解配置文件。
步骤1 - 设置项目
对于教程的目的,本示例将专注于本地index.html文件和由内容交付网络(CDN)托管的tsParticles库副本。
在您的终端窗口中,创建一个新的项目目录:
1mkdir tsparticles-example
然后,导航到新项目目录:
1cd tsparticles-example
然后创建一个 index.html 文件:
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4
5<head>
6 <meta charset="UTF-8" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
9 <title>tsParticles</title>
10 <style>
11 * {
12 box-sizing: border-box;
13 }
14
15 html,
16 body {
17 margin: 0;
18 padding: 0;
19 }
20
21 body {
22 background-color: #212121;
23 }
24</style>
25</head>
26
27<body>
28</body>
29</html>
图书馆将需要一个div和一个id来连接画布。 将新的<div id="tsparticles">添加到body:
1[label index.html]
2<body>
3 <div id="tsparticles"></div>
4</body>
然后,将 CDN 托管的库添加到身体:
1[label index.html]
2<body>
3 <div id="tsparticles"></div>
4
5 <script
6 src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
7 integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
8 crossorigin="anonymous"
9 ></script>
10</body>
<$>[注]
注: tsparticles.js 也可以通过 npm 获取:
1npm install tsparticles
美元
接下来,通过指定它应该连接的id来初始化tsParticles (在这种情况下,tsparticles):
1[label index.html]
2<body>
3 <div id="tsparticles"></div>
4
5 <script
6 src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
7 integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
8 crossorigin="anonymous"
9 ></script>
10
11 <script>
12 tsParticles.load('tsparticles');
13 </script>
14</body>
当你在网页浏览器中访问 index.html 时,你应该观察到几个随机分散在网页上的一些粒子. 确保到目前为止,一切都按预期工作,你可以继续添加自定义选项。
步骤 2 – 加载配置
图书馆文档列出了许多可用的选项(https://particles.js.org/interfaces/_options_interfaces_ioptions_.ioptions.html)。这些包括背景,互动性,粒子等等。
首先,复制 default.json并将其粘贴为‘粒子’:
1[label index.html]
2<script>
3 const particles = {
4 "fpsLimit": 60,
5 "particles": {
6 "number": {
7 "value": 80,
8 "density": {
9 "enable": true,
10 "value_area": 800
11 }
12 },
13 "color": {
14 "value": "#ff0000",
15 "animation": {
16 "enable": true,
17 "speed": 20,
18 "sync": true
19 }
20 },
21 "shape": {
22 "type": "circle",
23 "stroke": {
24 "width": 0
25 },
26 "polygon": {
27 "nb_sides": 5
28 },
29 },
30 "opacity": {
31 "value": 0.5,
32 "random": false,
33 "anim": {
34 "enable": false,
35 "speed": 3,
36 "opacity_min": 0.1,
37 "sync": false
38 }
39 },
40 "size": {
41 "value": 3,
42 "random": true,
43 "anim": {
44 "enable": false,
45 "speed": 20,
46 "size_min": 0.1,
47 "sync": false
48 }
49 },
50 "links": {
51 "enable": true,
52 "distance": 100,
53 "color": "#ffffff",
54 "opacity": 0.4,
55 "width": 1
56 },
57 "move": {
58 "enable": true,
59 "speed": 6,
60 "direction": "none",
61 "random": false,
62 "straight": false,
63 "out_mode": "out",
64 "attract": {
65 "enable": false,
66 "rotateX": 600,
67 "rotateY": 1200
68 }
69 }
70 },
71 "interactivity": {
72 "detect_on": "canvas",
73 "events": {
74 "onhover": {
75 "enable": true,
76 "mode": "repulse"
77 },
78 "onclick": {
79 "enable": true,
80 "mode": "push"
81 },
82 "resize": true
83 },
84 "modes": {
85 "grab": {
86 "distance": 400,
87 "line_linked": {
88 "opacity": 1
89 }
90 },
91 "bubble": {
92 "distance": 400,
93 "size": 40,
94 "duration": 2,
95 "opacity": 0.8
96 },
97 "repulse": {
98 "distance": 200
99 },
100 "push": {
101 "particles_nb": 4
102 },
103 "remove": {
104 "particles_nb": 2
105 }
106 }
107 },
108 "retina_detect": true,
109 "background": {
110 "color": "#000000",
111 "image": "",
112 "position": "50% 50%",
113 "repeat": "no-repeat",
114 "size": "cover"
115 }
116 };
117
118 tsParticles.load('tsparticles');
119</script>
在您的 tsParticles.load() 调用中使用此新变量:
1<script>
2 // ...
3
4 tsParticles.load('tsparticles', particles);
5</script>
当您在 Web 浏览器中访问 index.html 时,您应该观察与线连接的小圈子并穿过屏幕。
步骤 3 – 定制配置
tsParticles可用的选项相互作用并相互影响,您应该试验调整值,看看它们如何影响粒子。
通过先前定义的粒子,您可以这样修改配置的值:
1[label index.html]
2<script>
3 const particles = {
4 "fpsLimit": 60,
5 "particles": {
6 "number": {
7 "value": 40,
8 "density": {
9 "enable": true,
10 "value_area": 800
11 }
12 },
13 "color": {
14 "value": "#ff9800",
15 "animation": {
16 "enable": false,
17 "speed": 20,
18 "sync": true
19 }
20 },
21 "shape": {
22 "type": "polygon",
23 "stroke": {
24 "width": 2
25 },
26 "polygon": {
27 "nb_sides": 6
28 },
29 },
30 "opacity": {
31 "value": 0.5,
32 "random": false,
33 "anim": {
34 "enable": false,
35 "speed": 3,
36 "opacity_min": 0.1,
37 "sync": false
38 }
39 },
40 "size": {
41 "value": 20<>,
42 "random": true,
43 "anim": {
44 "enable": false,
45 "speed": 20,
46 "size_min": 0.1,
47 "sync": false
48 }
49 },
50 "links": {
51 "enable": false,
52 "distance": 100,
53 "color": "#ffffff",
54 "opacity": 0.4,
55 "width": 1
56 },
57 "move": {
58 "enable": true,
59 "speed": 6,
60 "direction": "down",
61 "random": false,
62 "straight": false,
63 "out_mode": "out",
64 "attract": {
65 "enable": false,
66 "rotateX": 600,
67 "rotateY": 1200
68 }
69 }
70 },
71 "interactivity": {
72 "detect_on": "canvas",
73 "events": {
74 "onhover": {
75 "enable": true,
76 "mode": "repulse"
77 },
78 "onclick": {
79 "enable": true,
80 "mode": "push"
81 },
82 "resize": true
83 },
84 "modes": {
85 "grab": {
86 "distance": 400,
87 "line_linked": {
88 "opacity": 1
89 }
90 },
91 "bubble": {
92 "distance": 400,
93 "size": 40,
94 "duration": 2,
95 "opacity": 0.8
96 },
97 "repulse": {
98 "distance": 200
99 },
100 "push": {
101 "particles_nb": 4
102 },
103 "remove": {
104 "particles_nb": 2
105 }
106 }
107 },
108 "retina_detect": true,
109 "background": {
110 "color": "#ffffff",
111 "image": "",
112 "position": "50% 50%",
113 "repeat": "no-repeat",
114 "size": "cover"
115 }
116 };
117
118 tsParticles.load('tsparticles', particles);
119</script>
这个代码的变化会使背景颜色转变为白色,还会使粒子的形状从圆形变为六角形(六侧多角形)。多角形的数目和尺寸已经改变了。
当你在网页浏览器中访问index.html时,你应该注意到黄金六角形在页面上滑动。
通过配置进行实验
为了更好地了解图书馆所提供的潜力,您可以查看在tsParticles网站上提供的各种样本(https://particles.matteobruni.it/Samples)。
使用下载选取一个有趣的样本. 您可以使用本页面的编辑器来修改值. 然后点击 ** 重新加载** 查看更改。
如果您想要导出更改,请单击 ** 更多**,然后单击 ** 导出配置**。
<$>[注] 注: 其中一些演示可能需要额外的依赖性,例如,Awesome 字体样本需要 Awesome 字体库。
花一些时间将这些新配置分配给您的index.html中的粒子变量,并在您的 Web 浏览器中刷新页面。
结论
在本教程中,您了解了如何本地使用tsParticles库(以前称为Particles.js).
但是,您可能需要考虑浏览器支持,慢网络上的加载时间和较慢计算机的性能。
如果您想了解更多关于 JavaScript 的信息,请查看 我们的 JavaScript 主题页面以获取练习和编程项目。