前言
学习一个有趣炫酷的玩意开心一下图片。
tsparticles，可以方便的实现各种粒子特效。支持的语言框架也是相当的丰富.
image.png
一、vue3使用tsparticles
先来个vue3使用的入门案例：
pnpm install @tsparticles/vue3
然后按照官方文档：
import Particles from "@tsparticles/vue3";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
createApp(App).use(Particles, {
init: async engine => {
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
},
});
本以为可以了，但是看了一眼注释，还需要安装一下slim：
pnpm install @tsparticles/slim
在我的项目中是这样use的：
import Particles from "@tsparticles/vue3";
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
const app = createApp(App)
//创建pinia
const pinia = createPinia()
registerPlugins(app)
//使用路由器
app.use(router)
//使用pinia
app.use(pinia)
//使用Particles
app.use(Particles, {
init: async engine => {
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
},
})
二、使用步骤
创建页面mouseattraction.vue：
代码如下（示例）：
<template>
<div id="app">
<vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" />
<vue-particles
id="tsparticles"
@particles-loaded="particlesLoaded"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
},
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: true,
opacity: 0.5,
width: 1
},
move: {
direction: 'none',
enable: true,
outModes: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
value: { min: 1, max: 5 }
}
},
detectRetina: true
}"
/>
</div>
</template>
<script setup lang="ts" name="">
const particlesLoaded = async (container: any) => {
console.log("Particles container loaded", container);
};
</script>
<style lang='scss' scoped>
</style>
路由代码如下（示例）：
{
path:'/tsParticles/mouseattraction',
component:Mouseattraction
}
运行效果：
image.png
总结
只是按照官网的示例运行成功了，还有很多很多其他炫酷的示例没有测试，后续还会继续研究一番。
不要因为结束而哭泣，微笑吧，为你的曾经拥有。
