微客导航 » 文章资讯 » Vue波纹按钮组件制作

Vue波纹按钮组件制作

2023-09-13 12:07:06 133

先说一下用法：

默认按钮
默认按钮
定义速度和初始的波浪透明度

原理：

这里用的是canvas+requestAnimationFrame（兼容性可以网上找一下解决方法）绘制的波纹，有些用的是csstransform+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.fillStyle=this.color;
this.context.fill();
//定义下次的绘制半径和透明度
this.radius+=this.speed;
this.el.style.opacity-=this.speedOpacity;
//通过判断半径小于元素宽度或者还有透明度，不断绘制圆形
if(this.radius0){
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要好好休息一下。

返回顶部
3162201930
czq8825@qq.com

Vue波纹按钮组件制作

热门推荐

随机推荐