Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）

Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）

1. 下载包可采用npm/cnpm

   • npm/cnpm install particles.js --save
   • 这里附上git地址：https://github.com/VincentGarreau/particles.js
   • • 版本：
       

2. 在main.js 中引包，注册

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

3. 在所要使用的界面引用如下代码

• <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>