Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）
- 下载包可采用npm/cnpm
npm/cnpm install particles.js --save- 这里附上git地址：
https://github.com/VincentGarreau/particles.js - 版本：
- 在main.js 中引包，注册
import particles from 'particles.js' Vue.use(particles)
- 在所要使用的界面引用如下代码
<div id="particles-js">
<canvas class="particles-js-canvas-el" width="1920" height="1080" style="width: 100%; height: 100%;"></canvas>
</div>
mounted(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 40,//数量
"density": {
"enable": true, //启用粒子的稀密程度
"value_area": 800 //区域散布密度大小
}
},
"color": {
"value": "#f3eaa1" //原子的颜色
},
"shape": {
"type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
"stroke": {
"width": 0, //原子的宽度
"color": "#f3eaa1" //原子颜色
},
"polygon": {
"nb_sides": 5 // 原子的多边形边数
},
"image": {
"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
"width": 100, //图片宽度
"height": 100 //图片高度
}
},
"opacity": {
"value": 1, //不透明度
"random": true, //随机不透明度
"anim": {
"enable": true, //渐变动画
"speed": 1, // 渐变动画速度
"opacity_min": 0, //渐变动画不透明度
"sync": true
}
},
"size": {
"value": 3, //原子大小
"random": true, // 原子大小随机
"anim": {
"enable": false, // 原子渐变
"speed": 4, //原子渐变速度
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false, //连接线
"distance": 150, //连接线距离
"color": "#ffffff", //连接线颜色
"opacity": 0.4, //连接线不透明度
"width": 1 //连接线的宽度
},
"move": {
"enable": true, //原子移动
"speed": 1, //原子移动速度
"direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
"random": true, //移动随机方向
"straight": false, //直接移动
"out_mode": "out", //是否移动出画布
"bounce": false, //是否跳动移动
"attract": {
"enable": false, // 原子之间吸引
"rotateX": 600, //原子之间吸引X水平距离
"rotateY": 600 //原子之间吸引Y水平距离
}
}
},
"interactivity": {
"detect_on": "canvas", //原子之间互动检测 "canvas", "window"
"events": {
"onhover": {
"enable": true, //悬停
"mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
},
"onclick": {
"enable": false, //点击效果
"mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
},
"resize": true // 互动事件调整
},
"modes": {
"grab": {
"distance": 100, //原子互动抓取距离
"line_linked": {
"opacity": 0.8 //原子互动抓取距离连线不透明度
}
},
"bubble": {
"distance": 250, //原子抓取泡沫效果之间的距离
"size": 4, // 原子抓取泡沫效果之间的大小
"duration": 2, //原子抓取泡沫效果之间的持续事件
"opacity": 1, //原子抓取泡沫效果透明度
"speed": 3
},
"repulse": {
"distance": 400, //击退效果距离
"duration": 0.4 //击退效果持续事件
},
"push": {
"particles_nb": 4 //粒子推出的数量
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);
}
之所以这么写，是遇到了一些问题，自己将data数据抽离出去，就会报错（传的是相对路径），不知道为什么，还请各位小伙伴赐教。
效果图如下
## 组件封装(可以直接拿过去使用哦！！)
<template>
<div>
<div id="particles-js">
<canvas
class="particles-js-canvas-el"
width="1920"
height="1080"
style="width: 100%; height: 100%"
></canvas>
</div>
</div>
</template>
<script>
export default {
mounted() {
particlesJS("particles-js", {
particles: {
number: {
value: 40, //数量
density: {
enable: true, //启用粒子的稀密程度
value_area: 800, //区域散布密度大小
},
},
color: {
value: "#f3eaa1", //原子的颜色
},
shape: {
type: "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
stroke: {
width: 0, //原子的宽度
color: "#f3eaa1", //原子颜色
},
polygon: {
nb_sides: 5, // 原子的多边形边数
},
image: {
src: "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
width: 100, //图片宽度
height: 100, //图片高度
},
},
opacity: {
value: 1, //不透明度
random: true, //随机不透明度
anim: {
enable: true, //渐变动画
speed: 1, // 渐变动画速度
opacity_min: 0, //渐变动画不透明度
sync: true,
},
},
size: {
value: 3, //原子大小
random: true, // 原子大小随机
anim: {
enable: false, // 原子渐变
speed: 4, //原子渐变速度
size_min: 0.3,
sync: false,
},
},
line_linked: {
enable: false, //连接线
distance: 150, //连接线距离
color: "#ffffff", //连接线颜色
opacity: 0.4, //连接线不透明度
width: 1, //连接线的宽度
},
move: {
enable: true, //原子移动
speed: 1, //原子移动速度
direction: "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
random: true, //移动随机方向
straight: false, //直接移动
out_mode: "out", //是否移动出画布
bounce: false, //是否跳动移动
attract: {
enable: false, // 原子之间吸引
rotateX: 600, //原子之间吸引X水平距离
rotateY: 600, //原子之间吸引Y水平距离
},
},
},
interactivity: {
detect_on: "canvas", //原子之间互动检测 "canvas", "window"
events: {
onhover: {
enable: true, //悬停
mode: "bubble", //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
},
onclick: {
enable: false, //点击效果
mode: "repulse", //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
},
resize: true, // 互动事件调整
},
modes: {
grab: {
distance: 100, //原子互动抓取距离
line_linked: {
opacity: 0.8, //原子互动抓取距离连线不透明度
},
},
bubble: {
distance: 250, //原子抓取泡沫效果之间的距离
size: 4, // 原子抓取泡沫效果之间的大小
duration: 2, //原子抓取泡沫效果之间的持续事件
opacity: 1, //原子抓取泡沫效果透明度
speed: 3,
},
repulse: {
distance: 400, //击退效果距离
duration: 0.4, //击退效果持续事件
},
push: {
particles_nb: 4, //粒子推出的数量
},
remove: {
particles_nb: 2,
},
},
},
retina_detect: true,
});
},
};
</script>
<style lang="scss" scoped>
#particles-js {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
</style>