Vue波纹按钮组件制作


Posted in Javascript onApril 30, 2018

先说一下用法:

<zk-button class="btn btn-default">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round" :speed="4" :opacity="0.6">定义速度和初始的波浪透明度</zk-button>

原理:

这里用的是canvas + requestAnimationFrame(兼容性可以网上找一下解决方法) 绘制的波纹,有些用的是css transform + setTimeout做的,我感觉不太好。

模板(template):

<template>
 <button class="zk-btn">
  <canvas class="zk-ripple" @click="ripple"></canvas>
  <slot></slot>
 </button>
</template>

点击代码如下(我已经加入详细的注释)

ripple(event) {
 // 清除上次没有执行的动画
 if (this.timer) {
  window.cancelAnimationFrame(this.timer);
 }
 this.el = event.target;
 // 执行初始化
 if (!this.initialized) {
  this.initialized = true;
  this.init(this.el);
 }
 this.radius = 0;
 // 点击坐标原点
 this.origin.x = event.offsetX;
 this.origin.y = event.offsetY;
 this.context.clearRect(0, 0, this.el.width, this.el.height);
 this.el.style.opacity = this.opacity;
 this.draw();
},

这里主要初始化canvas和获取用户点击的位置坐标,并开始绘制。

循环绘制

draw() {
 this.context.beginPath();
 // 绘制波纹
 this.context.arc(this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI, false);
 this.context.fillStyle = this.color;
 this.context.fill();
 // 定义下次的绘制半径和透明度
 this.radius += this.speed;
 this.el.style.opacity -= this.speedOpacity;
 // 通过判断半径小于元素宽度或者还有透明度,不断绘制圆形
 if (this.radius < this.el.width || this.el.style.opacity > 0) {
  this.timer = window.requestAnimationFrame(this.draw);
 } else {
  // 清除画布
  this.context.clearRect(0, 0, this.el.width, this.el.height);
  this.el.style.opacity = 0;
 }
}

总结:

上面代码我没有复制完整,大家想看源码可以下载看一下

这是4月最后一天上班了,5.1要好好休息一下。

Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
学习JS中的DOM节点以及操作
Apr 30 #Javascript
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
在vscode里使用.vue代码模板的方法
Apr 28 #Javascript
JS实现的透明度渐变动画效果示例
Apr 28 #Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 #Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python检测远程端口是否打开的方法
2015/03/14 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
英语教育专业自荐信
2014/05/29 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MySQL多表查询机制
2022/03/17 MySQL