当前位置：首页 > news >正文

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

news 2025/8/3 20:12:23

文章目录

前言
一、怎样使用官方提供的特效
二、海葵特效
总结

前言

官方还有很多漂亮的特效，但是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",},
});