vue3整合particles实现粒子飘落动画

工具版本

（1）软件工具：IntelliJ IDEA 2021.1 x64、
（2）框架："vite": "^5.4.10","vue": "^3.5.12",
（3）依赖："particles.vue3": "^1.43.1","tsparticles": "^3.8.0",
（4）配置项网址：https://particles.js.org/samples/presets/index.html

效果图

一、依赖安装

//使用npm安装
npm install particles.vue3 --save
//使用yarn安装
yarn add particles.vue3 --save
//使用TS还需安装，如果安装完还是报错找不到该模块，可以重启一下项目
npm i tsparticles

二、main.ts 中导入

import Particles from 'particles.vue3'
createApp(App)
  .use(Particles)
  .mount('#app')

三、页面中使用

<script setup lang="ts">
import { loadFull } from "tsparticles"
import type { Engine } from 'tsparticles-engine'
import {reactive} from "vue";

let myOption = reactive({
  background: {
    color: {
      value: '#222431'
    }
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {//鼠标悬浮
        enable: true,
        mode: 'grab'//grab bubble repulse
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {//连线
      color: '#ffffff',
      distance: 150,
      enable: false,
      opacity: 0.5,
      width: 1
    },
    collisions: {
      enable: true
    },
    move: {//移动方向/速度
      direction: 'bottom',
      enable: true,
      random: false,
      speed: 3,
      straight: false,
      out_mode: 'out',
      attract:{//原子间吸引
        enable: false
      }
    },
    number: {//粒子数量/分布
      density: {//密度
        enable: true,
        area: 800,
        value_area: 500
      },
      value: 100
    },
    opacity: {//透明度
      value: 0.9
    },
    shape: {
      type: 'circle'
    },
    size: {//粒子大小
      random: true,
      value: 4
    }
  },
  detectRetina: true
})

const particlesInit = async (engine:Engine) => {
  console.log('加载了')
  // await loadFull(engine)
}

const particlesLoaded = async (container:any) => {
  console.log('hty-Particles container loaded', container)
}

</script>
<template>
  <Particles
    id="tsparticles"
    :particlesInit="particlesInit"
    :particlesLoaded="particlesLoaded"
    :options="myOption"
  />
</template>

<style scoped lang="scss">

</style>

您的发现及意见

有存在错误或发现，可及时回复我。