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>
