web实现酷炫的canvas粒子动画配景

前言

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。
传统的粒子动画重要由 Canvas、WebGL 实现，我们经常用来用作网站的动画配景。
今天介绍两个个可以轻松创建高度可定制的粒子动画库。
一、particle-bg

1. git地点：

https://github.com/PengJiyuan/particle-bg
不带连线结果：

带连线的结果：

2. 安装

NPM

1. npm i particle-bg

复制代码

CDN

1. https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js

复制代码

3. 使用

ES Module

1. import particleBg from 'particle-bg';
3. particleBg('body');

复制代码

Browser

1. <script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js
2. "></script><script>  particleBg('body');</script>

复制代码

API

1. particleBg(element, config)
3. element
4. 要插入粒子背景的DOM。
6. config [Object]
7. 粒子背景的一些配置。
9. config.color
10. default: '#fff'
11. 粒子的颜色。
13. config.count
14. default: 100
15. 粒子的数量
17. config.radius
18. default: 2
19. 粒子的半径
21. config.distance
22. default: width / 10
23. 粒子间距小于多少会连线
25. config.rate
26. default: width / 10000
27. 粒子运动的速率
29. config.zIndex
30. default: 1
31. canvas的z-index.
33. config.resize
34. default: true
35. 是否监听window.resize，自动缩放粒子背景。
37. config.line
38. default: true
39. 粒子之间是否连线。
41. config.bounce
42. default: false
43. 是否触碰边界进行反弹。

复制代码

4. 完备demo

1. <div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="Bg"></div><script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js
2. "></script><script>   particleBg('#Bg', {        color: '#fff',        count: 100,        radius: 2,        distance: 70,        rate:1,        zIndex: 1,        resize: true,        line: true,        bounce: true,    });</script>

复制代码

结果

二、tsParticles

TypeScript Particles 是在 particles.js 底子上重写的一个库，目标是更轻易地创建更多的配景动画，并提供更多的实用步调和支持功能。
这个库最大的亮点在于它可以用于许多差异的框架，比方 React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery等等JS框架、Web组件。
1. 源码地点：

GitHub地点:https://github.com/matteobruni/tsparticles
官网地点:https://particles.js.org/
更多demo地点:https://codepen.io/collection/DPOage
2. 安装

npm

1. npm install tsparticles-engine

复制代码

yarn

1. yarn add tsparticles-engine

复制代码

pnpm

1. pnpm install tsparticles-engine

复制代码

3. 引入

从版本1.12.11开始使用import和require导入tsParticles了。

1. const tsParticles = require("tsparticles-engine");
2. // or
3. import { tsParticles } from "tsparticles-engine";

复制代码

4. 使用

index.html

1. <div id="tsparticles"></div>
3. <script src="tsparticles.engine.min.js"></script>

复制代码

app.js

1. tsParticles
2.     .loadJSON("tsparticles", "presets/default.json")
3.     .then(container => {
4.         console.log("callback - tsparticles config loaded");
5.     })
6.     .catch(error => {
7.         console.error(error);
8.     });

复制代码

5. 几个例子

5.1 ts粒子五彩纸屑烟花

1. <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.11.0/tsparticles.confetti.bundle.min.js"></script>
2. <script id="rendered-js">
3.     const duration = 60 * 60 * 1000,
4.         animationEnd = Date.now() + duration,
5.         defaults = { startVelocity: 30, spread: 360, ticks: 20, zIndex: 0 };
6.     function randomInRange(min, max) {
7.         return Math.random() * (max - min) + min;
8.     }
9.     const interval = setInterval(function () {
10.         const timeLeft = animationEnd - Date.now();
12.         if (timeLeft <= 0) {
13.             return clearInterval(interval);
14.         }
15.         const particleCount = 20 * (timeLeft / duration);
17.         // since particles fall down, start a bit higher than random
18.         confetti(
19.             Object.assign({}, defaults, {
20.                 particleCount,
21.                 origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
22.             }));
23.         confetti(
24.             Object.assign({}, defaults, {
25.                 particleCount,
26.                 origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
27.             }));
28.     }, 250);
29. </script>

复制代码

结果

5.2 多粒子产卵器-用tsParticles制作

1. <div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles"></div>
3. <script src="https://cdn.jsdelivr.net/npm/tsparticles@1.19.0-alpha.3/dist/tsparticles.min.js"></script>
4. <script id="rendered-js">
5.     tsParticles.load("tsparticles", {
6.         fpsLimit: 60,
7.         particles: {
8.             number: {
9.                 value: 0,
10.                 density: {
11.                     enable: true,
12.                     value_area: 800
13.                 }
14.             },
17.             color: {
18.                 value: "#ffff00"
19.             },
21.             shape: {
22.                 type: "circle"
23.             },
25.             opacity: {
26.                 value: 1,
27.                 random: false,
28.                 animation: {
29.                     enable: true,
30.                     speed: 0.5,
31.                     minimumValue: 0,
32.                     sync: false
33.                 }
34.             },
37.             size: {
38.                 value: 8,
39.                 random: { enable: true, minimumValue: 4 },
40.                 animation: {
41.                     enable: false,
42.                     speed: 20,
43.                     minimumValue: 4,
44.                     sync: false
45.                 }
46.             },
49.             move: {
50.                 enable: true,
51.                 gravity: {
52.                     enable: true,
53.                     acceleration: -0.5
54.                 },
56.                 speed: 5,
57.                 direction: "top",
58.                 random: false,
59.                 straight: false,
60.                 outModes: {
61.                     default: "destroy",
62.                     bottom: "none"
63.                 },
65.                 attract: {
66.                     enable: true,
67.                     distance: 300,
68.                     rotate: {
69.                         x: 600,
70.                         y: 1200
71.                     }
72.                 }
73.             }
74.         },
79.         interactivity: {
80.             detectsOn: "canvas",
81.             events: {
82.                 resize: true
83.             }
84.         },
87.         detectRetina: true,
88.         background: {
89.             color: "#000000"
90.         },
92.         emitters: [
93.             {
94.                 direction: "top",
95.                 particles: {
96.                     color: "#f00"
97.                 },
99.                 rate: {
100.                     quantity: 1,
101.                     delay: 0.1
102.                 },
104.                 size: {
105.                     width: 100,
106.                     height: 10
107.                 },
109.                 position: {
110.                     x: 50,
111.                     y: 100
112.                 }
113.             },
116.             {
117.                 direction: "top",
118.                 particles: {
119.                     color: "#0f0"
120.                 },
122.                 rate: {
123.                     quantity: 1,
124.                     delay: 0.1
125.                 },
127.                 size: {
128.                     width: 100,
129.                     height: 10
130.                 },
132.                 position: {
133.                     x: 50,
134.                     y: 100
135.                 }
136.             }]
137.     });
138.     //# sourceURL=pen.js
139. </script>

复制代码

结果

5.3 ts粒子鼠标吸引力

1. <div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles1"></div>
3. <script src="https://cdn.jsdelivr.net/npm/tsparticles@1.37.4/tsparticles.min.js"></script>
4. <script id="rendered-js">
5.     tsParticles.load("tsparticles1", {
6.         fps_limit: 60,
7.         interactivity: {
8.             detect_on: "canvas",
9.             events: {
10.                 onclick: { enable: true, mode: "push" },
11.                 onhover: {
12.                     enable: true,
13.                     mode: "attract",
14.                     parallax: { enable: false, force: 60, smooth: 10 }
15.                 },
17.                 resize: true
18.             },
20.             modes: {
21.                 push: { quantity: 4 },
22.                 attract: { distance: 200, duration: 0.4, factor: 5 }
23.             }
24.         },
27.         particles: {
28.             color: { value: "#ffffff" },
29.             line_linked: {
30.                 color: "#ffffff",
31.                 distance: 150,
32.                 enable: true,
33.                 opacity: 0.4,
34.                 width: 1
35.             },
37.             move: {
38.                 attract: { enable: false, rotateX: 600, rotateY: 1200 },
39.                 bounce: false,
40.                 direction: "none",
41.                 enable: true,
42.                 out_mode: "out",
43.                 random: false,
44.                 speed: 2,
45.                 straight: false
46.             },
48.             number: { density: { enable: true, value_area: 800 }, value: 80 },
49.             opacity: {
50.                 anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },
51.                 random: false,
52.                 value: 0.5
53.             },
55.             shape: {
56.                 character: {
57.                     fill: false,
58.                     font: "Verdana",
59.                     style: "",
60.                     value: "*",
61.                     weight: "400"
62.                 },
64.                 image: {
65.                     height: 100,
66.                     replace_color: true,
67.                     src: "images/github.svg",
68.                     width: 100
69.                 },
71.                 polygon: { nb_sides: 5 },
72.                 stroke: { color: "#000000", width: 0 },
73.                 type: "circle"
74.             },
76.             size: {
77.                 anim: { enable: false, size_min: 0.1, speed: 40, sync: false },
78.                 random: true,
79.                 value: 5
80.             }
81.         },
84.         polygon: {
85.             draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
86.             move: { radius: 10 },
87.             scale: 1,
88.             type: "none",
89.             url: ""
90.         },
92.         retina_detect: true
93.     });
94. </script>

复制代码

结果

5.4 粒子烟花

1. <script src="https://cdn.jsdelivr.net/npm/tsparticles-fireworks@2.11.0/tsparticles.fireworks.bundle.min.js"></script>
2. <script id="rendered-js">
3.    fireworks();
4. </script>

复制代码

结果

源码地点

https://gitcode.net/my12/particle
完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不停创作的最大动力。固然如果你发现了文章中存在错误大概有更好的解决方法，也欢迎评论私信告诉我哦！
好了，我是向宇，https://xiangyu.blog.csdn.net
一位在小公司冷静奋斗的开发者，出于兴趣爱好，于是迩来才开始自习unity。如果你碰到任何问题，也欢迎你评论私信找我， 虽然有些问题我大概也不肯定会，但是我会查阅各方资料，争取给出最好的发起，盼望可以帮助更多想学编程的人，共勉~


来源：https://blog.csdn.net/qq_36303853/article/details/132318746
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！