Vue波纹按钮组件制作

Vue波纹按钮组件制作

先说一下用法：

默认按钮

默认按钮

定义速度和初始的波浪透明度

原理：

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

模板（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.fillStyrxikyle = 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月最后一天上班了，5rxiky.1要好好休息一下。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。