文章目录
前言
粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。
传统的粒子动画主要由 Canvas、WebGL 实现，我们经常用来用作网站的动画背景。
今天介绍两个个可以轻松创建高度可定制的粒子动画库。
一、particle-bg
1. git地址：
https://github.com/PengJiyuan/particle-bg
不带连线效果：
带连线的效果：
2. 安装
NPM
npm i particle-bg
CDN
https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js
3. 使用
ES Module
import particleBg from 'particle-bg';
particleBg('body');
Browser
<script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js"></script>
<script>
particleBg('body');
</script>
API
particleBg(element, config)
element
要插入粒子背景的DOM。
config [Object]
粒子背景的一些配置。
config.color
default: '#fff'
粒子的颜色。
config.count
default: 100
粒子的数量
config.radius
default: 2
粒子的半径
config.distance
default: width / 10
粒子间距小于多少会连线
config.rate
default: width / 10000
粒子运动的速率
config.zIndex
default: 1
canvas的z-index.
config.resize
default: true
是否监听window.resize，自动缩放粒子背景。
config.line
default: true
粒子之间是否连线。
config.bounce
default: false
是否触碰边界进行反弹。
4. 完整demo
<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"></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
npm install tsparticles-engine
yarn
yarn add tsparticles-engine
pnpm
pnpm install tsparticles-engine
3. 引入
从版本1.12.11开始使用import和require导入tsParticles了。
const tsParticles = require("tsparticles-engine");
// or
import {
tsParticles } from "tsparticles-engine";
4. 使用
index.html
<div id="tsparticles"></div>
<script src="tsparticles.engine.min.js"></script>
app.js
tsParticles
.loadJSON("tsparticles", "presets/default.json")
.then(container => {
console.log("callback - tsparticles config loaded");
})
.catch(error => {
console.error(error);
});
5. 几个例子
5.1 ts粒子五彩纸屑烟花
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.confetti.bundle.min.js"></script>
<script id="rendered-js">
const duration = 60 * 60 * 1000,
animationEnd = Date.now() + duration,
defaults = {
startVelocity: 30, spread: 360, ticks: 20, zIndex: 0 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
const interval = setInterval(function () {
const timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
const particleCount = 20 * (timeLeft / duration);
// since particles fall down, start a bit higher than random
confetti(
Object.assign({
}, defaults, {
particleCount,
origin: {
x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
}));
confetti(
Object.assign({
}, defaults, {
particleCount,
origin: {
x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
}));
}, 250);
</script>
效果
5.2 多粒子产卵器-用tsParticles制作
<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tsparticles.min.js"></script>
<script id="rendered-js">
tsParticles.load("tsparticles", {
fpsLimit: 60,
particles: {
number: {
value: 0,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffff00"
},
shape: {
type: "circle"
},
opacity: {
value: 1,
random: false,
animation: {
enable: true,
speed: 0.5,
minimumValue: 0,
sync: false
}
},
size: {
value: 8,
random: {
enable: true, minimumValue: 4 },
animation: {
enable: false,
speed: 20,
minimumValue: 4,
sync: false
}
},
move: {
enable: true,
gravity: {
enable: true,
acceleration: -0.5
},
speed: 5,
direction: "top",
random: false,
straight: false,
outModes: {
default: "destroy",
bottom: "none"
},
attract: {
enable: true,
distance: 300,
rotate: {
x: 600,
y: 1200
}
}
}
},
interactivity: {
detectsOn: "canvas",
events: {
resize: true
}
},
detectRetina: true,
background: {
color: "#000000"
},
emitters: [
{
direction: "top",
particles: {
color: "#f00"
},
rate: {
quantity: 1,
delay: 0.1
},
size: {
width: 100,
height: 10
},
position: {
x: 50,
y: 100
}
},
{
direction: "top",
particles: {
color: "#0f0"
},
rate: {
quantity: 1,
delay: 0.1
},
size: {
width: 100,
height: 10
},
position: {
x: 50,
y: 100
}
}]
});
//# sourceURL=pen.js
</script>
效果
5.3 ts粒子鼠标吸引力
<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles1"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.min.js"></script>
<script id="rendered-js">
tsParticles.load("tsparticles1", {
fps_limit: 60,
interactivity: {
detect_on: "canvas",
events: {
onclick: {
enable: true, mode: "push" },
onhover: {
enable: true,
mode: "attract",
parallax: {
enable: false, force: 60, smooth: 10 }
},
resize: true
},
modes: {
push: {
quantity: 4 },
attract: {
distance: 200, duration: 0.4, factor: 5 }
}
},
particles: {
color: {
value: "#ffffff" },
line_linked: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.4,
width: 1
},
move: {
attract: {
enable: false, rotateX: 600, rotateY: 1200 },
bounce: false,
direction: "none",
enable: true,
out_mode: "out",
random: false,
speed: 2,
straight: false
},
number: {
density: {
enable: true, value_area: 800 }, value: 80 },
opacity: {
anim: {
enable: false, opacity_min: 0.1, speed: 1, sync: false },
random: false,
value: 0.5
},
shape: {
character: {
fill: false,
font: "Verdana",
style: "",
value: "*",
weight: "400"
},
image: {
height: 100,
replace_color: true,
src: "images/github.svg",
width: 100
},
polygon: {
nb_sides: 5 },
stroke: {
color: "#000000", width: 0 },
type: "circle"
},
size: {
anim: {
enable: false, size_min: 0.1, speed: 40, sync: false },
random: true,
value: 5
}
},
polygon: {
draw: {
enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
move: {
radius: 10 },
scale: 1,
type: "none",
url: ""
},
retina_detect: true
});
</script>
效果
5.4 粒子烟花
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.fireworks.bundle.min.js"></script>
<script id="rendered-js">
fireworks();
</script>
效果
源码地址
https://gitcode.net/my12/particle
完结
赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！
好了，我是向宇，https://xiangyu.blog.csdn.net
一位在小公司默默奋斗的开发者，出于兴趣爱好，于是最近才开始自习unity。如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我可能也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
