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

MIT
JavaScript
跨平台
2018-08-11
霍啸林

简介

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

类型: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

说明:动画结束时触发。

的码云指数为
超过 的项目
加载中

评论(10)

小鱼梦想
小鱼梦想
666
qizhiyang
qizhiyang
具体场景咋用,还得点复原啊
kernel64
kernel64
没图说个杰宝.
霍啸林
霍啸林 软件作者
各位所言极是,目前效果还不是很理想,欢迎 PR。等效果在各个主流环境中都完美了,再考虑配一个动图来展示。暂时就用介绍中提供的 demo 页面将就一下吧 :)
亦可塞艇
亦可塞艇
6
lxfeng
lxfeng
粒子效果没图说个JB啊
久永
久永
此处,我觉得应该有个图。。。
莫默磨墨先生
莫默磨墨先生
炫!
捍卫机密
捍卫机密
按钮消失速度和颗粒散发位置不够匹配!不过,值得盛赞!
luwenhua
luwenhua
效果一级棒

暂无资讯

暂无问答

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。 可以直接看 github源码。 新版Vue 3.0计划并已实现的主要架构改进和新功能: 编译器...

10/16 17:21
7
0
快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。 可以直接看 github源码。 新版Vue 3.0计划并已实现的主要架构改进和新功能: 编译器...

10/16 17:32
13
0
Vue经典开源项目汇总

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/xiangzhihong8/article/details/86715541 Vue.js(读音 /v...

08/28 17:50
193
0
vue笔记

添加devtools https://github.com/vuejs/vue-devtools#vue-devtools vue的computed属性 有缓存,methods属性没有缓存 vue实例中的data是属性 可以定义对象,Vue.component中的data是方法 需要...

2017/08/28 04:10
174
0
35个最好用的Vue开源库

Vue.js Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面。 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统。它提供了基本组件,用于构建失眠者最喜欢的深色界面。 ...

04/27 10:54
233
0
前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/78133622 vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于...

2018/11/28 21:00
48
0
Vue 自动化表单相关资料

1.使用vue自动化表单 2.Vue可视化,Vue代码生成,Vue动态表单 3.前端表单进阶之路:通过 Vue.js 实现表单可配置化 4.使用Vue动态生成form表单 5.autoform-devtool 6.Vue.js实践:实现多条件筛...

2018/07/17 09:28
130
0
vue

vue

2018/04/23 00:16
29
0
关于Vue使用小结

VUE是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,基于JavaScript,轻量,无依赖 Vue能做什么? 视图界面美化 Vue的使用步骤 入门 1.安装vue --这里提前安...

07/29 22:35
20
0
vue-cli3快速开始

vue-cli3快速开始 node 如没安装,详见<vue开发环境搭建(mac).md> webpack 安装webpack npm install webpack webpack-cli -g 查看版本 webpack -v vue-cli 安装vue-cli npm install vue-c...

02/27 08:56
38
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部