Vue波纹按钮组件制作

本文将向您展示如何制作一个具有水波纹效果的按钮组件，在 Vue 中实现这一功能的过程。对于有此需求的朋友们，可以跟随本文学习。

让我们看一下如何使用这个组件。

默认按钮为：

`默认按钮`

带有圆角和定义波浪速度和初始透明度的按钮为：

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

其原理主要是通过 canvas 结合 requestAnimationFrame 实现的。此方法具有良好的兼容性，也可以找到相关的解决方法。部分效果也通过 css transform 结合 setTimeout 实现，但感觉前者更为流畅。

组件的模板部分如下：

``

接下来是点击事件的处理函数 `ripple`：

`ripple(event) { // 清除上次未完成的动画 if (this.timer) { window.cancelAnimationFrame(this.timer); } this.el = event.target; // 如果未初始化则进行初始化操作 if (!thisitialized) { thisitialized = true; thisit(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(); }`

这个函数首先清除上次的动画，然后获取点击的元素和位置坐标。如果组件还未初始化，则进行初始化操作。然后清除画布并设置元素的透明度，最后调用 `draw` 函数开始绘制波纹。

接下来是 `draw` 函数，它负责循环绘制波纹：

`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; } }`

这个函数首先开始新的路径，然后绘制波纹。接着更新绘制的半径和元素的透明度。如果波纹的半径小于元素的宽度或者元素的透明度还未降至0，则继续绘制。否则，清除画布并重置元素的透明度。

以上就是该组件的主要实现过程。完整源码可以下载查看。提醒大家注意休息，工作之余要适当放松。详情可参考原文章。