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 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php实现登陆模块功能示例
2016/10/20 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
分公司经理岗位职责
2013/11/11 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
react如何快速设置文件路径别名
2021/04/28 Javascript