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 it
      await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
      await 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",
  },
});

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

---

总结

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