Particle Effect for Vue 在 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默认值：3oscillationCoefficient类型：Number默认值：20事件参考begin说明：动画开始时触发。complete说明：动画结束时触发。