在 Vue 中实现粒子特效 Particle Effect for Vue

简介
react-particle-effect-button 的 Vue 实现，零依赖（除 Vue 外）。

可以在 Vue 中实现粒子特效。

演示地址
Vue Particle Effect Buttons

安装教程
将 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

说明：动画结束时触发。