Score
0
Watch 28 Star 123 Fork 20

霍啸林 / vue-particle-effectJavaScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
Vue 版本的粒子效果。react-particle-effect-button 的 Vue 移植。除 Vue 框架外零依赖。 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

vue-particle-effect (demo)

项目介绍

Vue 版本的粒子效果。react-particle-effect-button 的 Vue 移植。除 Vue 框架外零依赖。

软件架构

核心文件只有一个: particle-effect.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

类型:StringArray

默认值:'easeInOutCubic'

说明:当绑定的值类型为String时,使用预设缓动函数,以ease开头。具体参考源码以及速查表。目前只支持一部分常见的缓动函数,可以通过传入含有四个数值的数组进行自定义。

  • canvasPadding

类型:Number

默认值:150

说明:单位是像素。在画布上预留额外的空间来显示动画。

  • size

类型:NumberFunction

默认值:() => Math.floor(Math.random() * 3 + 1)

说明:单位是像素。

  • speed

类型:NumberFunction

默认值:() => rand(4)

说明:rand函数的定义参见源码

  • particlesAmountCoefficient

类型:Number

默认值:3

  • oscillationCoefficient

类型:Number

默认值:20

事件参考

  • begin

说明:动画开始时触发。

  • complete

说明:动画结束时触发。

Comments ( 8 )

Sign in for post a comment

JavaScript
1
https://gitee.com/pxp/vue-particle-effect.git
git@gitee.com:pxp/vue-particle-effect.git
pxp
vue-particle-effect
vue-particle-effect
master

Help Search