# vue-particle-effect
**Repository Path**: pxp/vue-particle-effect
## Basic Information
- **Project Name**: vue-particle-effect
- **Description**: Vue2 版本的粒子效果。react-particle-effect-button 的 Vue 移植。除 Vue 框架外零依赖。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 370
- **Forks**: 65
- **Created**: 2018-08-10
- **Last Updated**: 2025-02-08
## Categories & Tags
**Categories**: vue-extensions, animation
**Tags**: None
## README
# vue-particle-effect ([demo](https://pxp.gitee.io/))
#### 项目介绍
Vue 版本的粒子效果。[react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) 的 Vue 移植。除 Vue 框架外零依赖。
#### 软件架构
核心文件只有一个: [particle-effect.vue](https://gitee.com/pxp/vue-particle-effect/blob/main/src/particle-effect.vue)
#### 安装教程
将 `particle-effect.vue` 复制到你的项目目录中,自行修改适配。
下载项目所有文件后,如果想在本地调试代码,请执行以下命令:
```bash
yarn install
yarn dev
```
#### 使用说明
```vue
BUTTON CONTENT GOES HERE
```
`ParticleEffect`组件中,由于使用了[slot](https://gitee.com/pxp/vue-particle-effect/blob/main/src/particle-effect.vue#L558),子节点除了可以是一个简单的`button`外,还可以是更复杂的`VNode`。
通过修改`hidden`属性的值,来启动粒子动画。比如用户点击了按钮,程序把`hidden`绑定的变量设为`true`,按钮便会在粒子动画中慢慢消失。
#### 属性参考
- **hidden**
类型:`Boolean`
默认值:`false`
说明:`ParticleEffect`组件会监控该属性的变化,从而启动相应的特效动画。
- **direction**
类型:`String`
默认值: `'left'`
说明:可选值包括`'left', 'right', 'top', 'bottom'`。
- **particleType**
类型:`String`
默认值:`'circle'`
说明:可选值包括`'circle', 'rectangle', 'triangle'`。
- **particleStyle**
类型:`String`
默认值:`'fill'`
说明:可选值包括`'fill', 'stroke'`。
- **particleColor**
类型:`String`
默认值:`'#000'`
- **duration**
类型:`Number`
默认值:`1000`
说明:单位是毫秒。
- **easing**
类型:`String`或`Array`
默认值:`'easeInOutCubic'`
说明:当绑定的值类型为`String`时,使用预设缓动函数,以`ease`开头。具体参考[源码](https://gitee.com/pxp/vue-particle-effect/blob/main/src/particle-effect.vue#L114)以及[速查表](https://easings.net)。目前只支持一部分常见的缓动函数,可以通过传入含有四个数值的数组进行自定义。
- **canvasPadding**
类型:`Number`
默认值:`150`
说明:单位是像素。在画布上预留额外的空间来显示动画。
- **size**
类型:`Number`或`Function`
默认值:`() => Math.floor(Math.random() * 3 + 1)`
说明:单位是像素。
- **speed**
类型:`Number`或`Function`
默认值:`() => rand(4)`
说明:`rand`函数的定义参见[源码](https://gitee.com/pxp/vue-particle-effect/blob/main/src/particle-effect.vue#L172)。
- **particlesAmountCoefficient**
类型:`Number`
默认值:`3`
- **oscillationCoefficient**
类型:`Number`
默认值:`20`
#### 事件参考
- **begin**
说明:动画开始时触发。
- **complete**
说明:动画结束时触发。