vue3使用particles.vue3完成粒子特效参数详解
时间: 2024-12-26 18:24:20 浏览: 12
### Vue3 中使用 `particles.vue3` 实现粒子特效
#### 安装依赖
为了在项目中集成 `particles.vue3`,需要先安装该插件。可以通过 npm 或 yarn 来完成安装。
```bash
npm install particles.vue3
```
或者
```bash
yarn add particles.vue3
```
#### 基本配置与初始化
引入并注册组件之后,在模板文件内声明 `<Particles />` 组件即可开始自定义粒子动画效果[^1]:
```vue
<template>
<div id="app">
<!-- 配置项通过 options 属性传递 -->
<Particles :options="particleOptions"/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 导入 Particles 组件
import Particles from "particles.vue3";
const particleOptions = ref({
background: {
color: "#0d47a1"
},
fpsLimit: 60,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
}
}
},
particles: {
number: {
value: 80, // 粒子数量
density: {
enable: true,
value_area: 800
}
},
shape: {
type: ["circle", "edge"], // 形状类型
},
move: {
speed: 2, // 移动速度
direction: "none",
random: false,
straight: false,
outModes: {
default: "out",
},
},
size: {
value: 3, // 大小范围
random: true,
},
opacity: {
value: 0.5, // 不透明度
random: false,
animation: {
enable: false,
speed: 1,
minimumValue: 0.1
}
}
}
});
</script>
```
#### 关键参数解释
- **background**: 设置背景颜色或图像。
- **fpsLimit**: 控制帧率上限,默认为 60 FPS。
- **interactivity**: 描述交互行为,比如点击时新增粒子(`onClick`)。
- **particles.number.value**: 设定初始显示的粒子数目。
- **particles.shape.type**: 可选圆形(circle)、边(edge)等多种形状组合。
- **particles.move.speed**: 调整粒子移动的速度大小。
- **particles.size.value**: 改变粒子尺寸;启用随机化则允许不同粒径共存。
- **opacity.animation.enable**: 开启不透明度渐变变化的效果开关[^2]。
阅读全文