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 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
学习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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
popdiv
2006/07/14 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
python程序变成软件的实操方法
2019/06/24 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python中reload重载实例用法
2020/12/15 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
会计电算化应届生求职信
2013/11/03 职场文书
党课培训主持词
2014/04/01 职场文书
职业生涯规划书前言
2014/04/15 职场文书
教师四风问题整改措施
2014/09/25 职场文书
邀请函模板
2015/02/02 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis