Vue3+ts+tsparticles实现粒子背景特效，代码细节多图解析

前言

之前在浏览博客论坛时，看到背景页中出现了粒子特效，感觉很新奇，于是便在网上查找了一些demo。结果发现，基本上都是使用vue+js去实现粒子背景效果的，于是我决定写一篇关于ts实现粒子背景的文章。

原理

粒子背景特效实际上是通过在画布上绘制大量的小粒子，并对这些粒子进行移动和碰撞检测来实现的。粒子可以是任何形状，比如圆形、方形、三角形等，也可以是自定义的形状。粒子的移动可以通过速度和加速度来控制，碰撞检测可以通过计算粒子之间的距离来实现。

实现

1. 安装tsparticles

首先，我们需要在项目中安装tsparticles。

npm install tsparticles

2. 创建画布

接下来，我们需要创建一个画布来绘制粒子。

<canvas id="canvas"></canvas>

3. 初始化tsparticles

然后，我们需要初始化tsparticles。

const particles = new TSParticles("canvas", {
  fpsLimit: 60,
  interactivity: {
    events: {
      onhover: {
        enable: true,
        mode: "repulse",
      },
    },
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.5,
    },
    move: {
      direction: "none",
      enable: true,
      outModes: {
        default: "out",
      },
      random: false,
      speed: 2,
      straight: false,
    },
    number: {
      density: {
        enable: true,
        area: 800,
      },
      value: 100,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
});

particles.init();

4. 设置粒子参数

我们可以通过设置粒子参数来控制粒子的外观和行为。

particles.loadJSON({
  fpsLimit: 60,
  interactivity: {
    events: {
      onhover: {
        enable: true,
        mode: "repulse",
      },
    },
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.5,
    },
    move: {
      direction: "none",
      enable: true,
      outModes: {
        default: "out",
      },
      random: false,
      speed: 2,
      straight: false,
    },
    number: {
      density: {
        enable: true,
        area: 800,
      },
      value: 100,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
});

5. 响应用户交互

我们可以通过响应用户交互来控制粒子的行为。

particles.on("hover", (event) => {
  particles.shape.type = "circle";
});

总结

通过以上步骤，我们就实现了使用Vue3+ts+tsparticles实现粒子背景效果。

代码示例

<template>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import Vue from "vue";
import { TSParticles } from "tsparticles";

export default {
  mounted() {
    const particles = new TSParticles("canvas", {
      fpsLimit: 60,
      interactivity: {
        events: {
          onhover: {
            enable: true,
            mode: "repulse",
          },
        },
      },
      particles: {
        color: {
          value: "#ffffff",
        },
        links: {
          color: "#ffffff",
          distance: 150,
          enable: true,
          opacity: 0.5,
        },
        move: {
          direction: "none",
          enable: true,
          outModes: {
            default: "out",
          },
          random: false,
          speed: 2,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            area: 800,
          },
          value: 100,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: "circle",
        },
        size: {
          random: true,
          value: 5,
        },
      },
    });

    particles.init();

    particles.on("hover", (event) => {
      particles.shape.type = "circle";
    });
  },
};
</script>

效果图