在 Vue 中实现粒子特效 Particle Effect for Vue
- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://gitee.com/pxp/vue-particle-effect
- 软件文档: https://gitee.com/pxp/vue-particle-effect/blob/master/README.md
软件介绍
简介
react-particle-effect-button 的 Vue 实现，零依赖（除 Vue 外）。
可以在 Vue 中实现粒子特效。
演示地址
安装教程
将 particle-effect.vue 复制到你的项目目录中，自行修改适配。
下载项目所有文件后，如果想在本地调试代码，请执行以下命令：
yarn install yarn dev
使用说明
<script>
import ParticleEffect from './particle-effect'
export default {
data() {
return {
effectHidden: false,
}
},
methods: {
onBegin() {
console.log('begin event')
},
onComplete() {
console.log('complete event')
},
},
}
</script>
<template>
<ParticleEffect
:hidden="effectHidden"
direction="left"
particle-type="circle"
particle-style="fill"
particle-color="#000"
:duration="1000"
easing="easeInOutCubic"
:canvas-padding="150"
:size="4"
:speed="2"
:particles-amount-coefficient="3"
:oscillation-coefficient="20"
@begin="onBegin"
@complete="onComplete"
>
BUTTON CONTENT GOES HERE
</ParticleEffect>
</template>ParticleEffect组件中，由于使用了slot，子节点除了可以是一个简单的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开头。具体参考源码。
canvasPadding
类型：Number
默认值：150
说明：单位是像素。在画布上预留额外的空间来显示动画。
size
类型：Number或Function
默认值：() => Math.floor(Math.random() * 3 + 1)
说明：单位是像素。
speed
类型：Number或Function
默认值：() => rand(4)
说明：rand函数的定义参见源码。
particlesAmountCoefficient
类型：Number
默认值：3
oscillationCoefficient
类型：Number
默认值：20
事件参考
begin
说明：动画开始时触发。
complete
说明：动画结束时触发。
