在 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
说明:动画结束时触发。
构建之法(第二版)
邹欣 / 人民邮电出版社 / 2015-7 / 59
软件工程牵涉的范围很广, 同时也是一般院校的同学反映比较空洞乏味的课程。 但是软件工程的技术对于投身IT 产业的学生来说是非常重要的。作者邹欣有长达20年的一线软件开发经验,他利用业余时间在数所高校进行了长达6年的软件工程教学实践,总结出了在16周的时间内让同学们通过 “做中学 (Learning By Doing)” 掌握实用的软件工程技术的教学计划,并得到高校师生的积极反馈。在此基础上,作者对......一起来看看 《构建之法(第二版)》 这本书的介绍吧!
