vue 中使用particles.js

1. particles.js 是什么？
--- 轻量级JavaScript粒子库 ， 
gitHub 地址可以下载示例代码，示例代码为DOM开发形式: https://github.com/VincentGarreau/particles.js

2. 效果就不给看了，公司的内部网站。直接上代码

//(1) 下载particles.js 
npm install particles.js --save

//(2) 在template里面写一个div作为粒子库的容器  ，就像canvas那样
<div id="particlesId"></div> 

//(3) 创建粒子库的配置文件，particles.json  ， 建议放在public静态资源文件夹

https://www.jb51.net/article/123527.htm   这个配置地址里有两个，我认为不好看
http://www.jq22.com/jquery-info20054      这个里面很漂亮，配置参数注释详细

为了方便，我直接将我认为漂亮的配置particles.json粘贴过来

{
 "particles": {
   "number": {
     "value": 160,//数量
     "density": {
       "enable": true, //启用粒子的稀密程度
       "value_area": 800 //区域散布密度大小
     }
   },
   "color": {
     "value": "#ffffff" //原子的颜色
   },
   "shape": {
     "type": "circle", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
     "stroke": {
       "width": 0, //原子的宽度
       "color": "#000000" //原子颜色
     },
     "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
}

（4）在script标签里面，导入 “particles.js 和 particles.json” , 

import particles from 'particles.js'                       // 这是导入，第一步，npm安装的particles.js 文件
import particlesConfig from '../../public/particles.json'  // 这是我自己的文件路径哈

因为在mounted阶段，组件才挂载在页面上，这是最早操作DOM的生命周期函数 。
现在 ，将数据放进指定id=particlesId 的div中

 mounted () {
      // 参数1 ，为div节点的id , 参数2，为particles.json配置文件
      particlesJS("particlesId",particlesConfig);
  }

（5）你可以设置一下 ， id="particlesId"的div的位置和样式

#particlesId{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #b61924;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
}

以上，就能看到效果了。

虽然还有一些疑问，先做出效果，以后有机会再来修改，该篇博文
particlesJs("参数1","参数2") ， particlesJs从哪来的 ，为什么就好使了呢？？？

 

转载于:https://www.cnblogs.com/tengyuxin/p/11195571.html