Particle Effect for Vue 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Particle Effect for Vue 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Particle Effect for Vue 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 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

说明:动画结束时触发。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (10)

加载中
打分: 力荐
666
2018/08/21 08:56
回复
举报
具体场景咋用,还得点复原啊
2018/08/21 00:12
回复
举报
没图说个杰宝.
2018/08/20 22:57
回复
举报
霍啸林软件作者
各位所言极是,目前效果还不是很理想,欢迎 PR。等效果在各个主流环境中都完美了,再考虑配一个动图来展示。暂时就用介绍中提供的 demo 页面将就一下吧 :)
2018/08/20 19:58
回复
举报
打分: 力荐
6
2018/08/20 14:54
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
打分: 推荐
此处,我觉得应该有个图。。。
2018/08/20 10:06
回复
举报
打分: 推荐
炫!
2018/08/20 09:18
回复
举报
打分: 力荐
按钮消失速度和颗粒散发位置不够匹配!不过,值得盛赞!
2018/08/20 08:37
回复
举报
打分: 力荐
效果一级棒
2018/08/20 08:29
回复
举报
更多评论
暂无内容
发表了博客
2020/11/04 12:06

粒子排序插件 - Particle Effect For UGUI

转载地址;https://github.com/mob-sakai/ParticleEffectForUGUI

0
0
发表了博客
2020/04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂时没发现这些错误对项目的运行和打包有啥影响,但是一句话,看着不爽。既然看着不爽,就想收拾它,怎么收拾...

0
3
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 </head...

0
1
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的。 MVC 与 前端中的 MVVM...

0
1
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 生命周期钩子函数 作用范围 beforeCreate el,data都为undefined,还没有初始化...

0
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
10 评论
49 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部