Vue3实战笔记（38）—粒子特效终章

---

前言

官方还有很多漂亮的特效，但是vue3只有一个demo，例如我前面实现的两个页面就耗费了一些时间，今天记录一下tsparticles官方内置的几个特效的使用方法，一般这几个就足够用了。

---

一、怎样使用官方提供的特效

例如想使用preset-stars，先安装

pnpm i @tsparticles/preset-stars

新建页面preset-star.vue

<template><div><vue-particles id="tsparticles"  :options="particlesOptions" /></div>
</template><script setup lang="ts" name="">const particlesOptions = {particles: {shape: {type: "star", // starting from v2, this require the square shape script},},preset: "stars",}
</script><style lang='scss' scoped>
</style>

main.ts中：

import { loadStarsPreset } from "@tsparticles/preset-stars";//使用Particles
app.use(Particles, {init: async engine => {await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animationsawait loadStarsPreset(engine); },})

看看，简简单单就来效果了：

二、海葵特效

pnpm i @tsparticles/preset-sea-anemone

tsParticles.load({id: "tsparticles",options: {particles: {shape: {type: "square", // starting from v2, this require the square shape script},},preset: "seaAnemone",},
});

就举这两个例子介绍一下使用方法吧，想要其他特效可以去官网翻翻，还有说明一点这些都是动画特效，运行起来比我截图漂亮多了。

---

总结

世间万物皆为我所用，非我所属。