在vue中使用

1. 先下载

npm install --save particles.js

2.引入

如果多个文件要用的话，可以用如下引入，单文件则只需
import particles from 'particles.js'

import particles from 'particles.js'
Vue.use(particles)

3. template

这个就是动态粒子要展示的位置。我的需求是在登录页面弄这个粒子特效，然后我就把这id放到了登录页面最外层的父元素上。

<div id="particles"></div>

4. script

因为涉及到dom树，所以必须在挂载结束后初始化particles.js。第一个参数id就是你在template上取得id名，像我要写的话就是particles。第二个参数是你的data存放的路径，个人建议使用相对路径。(我把particles.json放到了public目录里面。路径就如下面所示)

mounted(){
    particlesJS.load('particles', '/particles.json', function () {
        console.log('callback - particles.js config loaded');
    });
}

5. particles.json

这个文件就相当于配置文件，用于控制粒子在页面中所呈现的状态。通过修改里边的字段，来得到自己想要的效果。如修改particles.color.value 的值就是修改粒子的颜色；修改particle.shape就是修改粒子的外观。至于详细的参数解析可以参考官网 ps：建议放在静态资源文件夹里

{
 "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
}

在react中使用

1. 先下载

npm install react-particles-js || yarn add react-particles-js

2. 直接当前组件使用

import Particles from 'react-particles-js';
import params from "../../assets/static/particles.json";

class App extends Component{
  
    render(){
        return (
            <Particles params={params}/>
        );
    };

}

3. particles.json

这个文件就相当于配置文件，用于控制粒子在页面中所呈现的状态。通过修改里边的字段，来得到自己想要的效果。如修改particles.color.value 的值就是修改粒子的颜色；修改particle.shape就是修改粒子的外观。至于详细的参数解析可以参考官网 ps：建议放在静态资源文件夹里

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#c7d2dd"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#c7d2dd",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 1
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "config_demo": {
    "hide_card": false,
    "background_color": "#b61924",
    "background_image": "",
    "background_position": "50% 50%",
    "background_repeat": "no-repeat",
    "background_size": "cover"
  }
}