JavaScript实现按钮波纹点击效果

按钮波纹

我们经常使用安卓手机知道，当我点击这个按钮的时候，这个按钮周围就会有波纹，这个效果用户体验是比较好的，那么我们如何使用JavaScript来实现呢

实现思路

我们代码实现的思路是，我们首先使用css做一个一次性播放的动画。然后我们用js动态获取用户点击按钮的相对位置，然后在指定位置添加合适的带有动画的元素，来播放css波纹特效

代码实现

css代码

button {
   position: relative;
    overflow: hidden;
    margin: auto;
    padding: 1rem 2rem;
    color: #fff;
    background: #6200ee;
    font-family: "Roboto", sans-serif;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
    outline: 0;
    border: 0;
    cursor: pointer;
}

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.7);
    animation: ripple 600ms linear;
}

@keyframes ripple {
  to {
        transform: scale(4);
        opacity: 0;
    }
}

html

<button id="ripple" onclick="submit()">BUTTON</button>

js

 var createRipple=function (event) {
    const button = event.currentTarget;
    const rippleSize = Math.max(button.clientWidth, button.clientHeight)
    const moved = rippleSize / 2;
    const circle = document.createElement("span")
    circle.style.width = circle.style.height = `${rippleSize}px`
    circle.style.top = `${event.clientY - button.offsetTop - moved}px`
    circle.style.left = `${event.clientX - button.offsetLeft - moved}px`
    circle.classList.add("ripple")
    const isExist = button.getElementsByClassName("ripple")[0]
    if (isExist) {
        isExist.remove()
    }
    button.append(circle)
}
document.getElementById("ripple").addEventListener("click",createRipple)
function submit(){
    console.log("按钮被点击")
}

实现效果：

代码解读

css中对sapn标签使用了绝对定位，把span标签定位在button上面，但是还没有设置span元素的具体位置和宽高。我们还对span设置了一个波纹特效，让它从scale(0)变成scale(10)，opacity从1变到0，这个动画只执行一次。

对应代码：

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.7);
    animation: ripple 600ms linear;
}

@keyframes ripple {
  to {
        transform: scale(4);
        opacity: 0;
    }
}

注：span.ripple是属性选择器，等价于span[class=“ripple”]

首先我们创造一个span标签

const circle = document.createElement("span")

然后我们使用js获取按钮的宽高，也就是clientWidth和clientHeight，然后我们取较长的作为span标签的宽度和高度，（注：span标签是正方形的，设置border-radius:50%后变成圆形）

//取button中较长的宽度作为span的宽度
const rippleSize = Math.max(button.clientWidth, button.clientHeight)
circle.style.width = circle.style.height = `${rippleSize}px`

其次，我们接下来就是计算这个span标签应该定位在button上的位置，为了确保鼠标光标在span圆的最中央，我们要进行减去span标签一半的操作，确保居中对齐。（不用担心缩放函数scale，它是参照中心进行缩放的，我们就放心减去真实span宽高的一半就行了）

circle.style.top = `${event.clientY - button.offsetTop - moved}px`
circle.style.left = `${event.clientX - button.offsetLeft - moved}px`

最后我们给span标签添加类名ripple

circle.classList.add("ripple")

给button内部追加上去这个span标签，注意每次追加前都要先移除span然后再追加span

讲解结束，仔细看代码就能懂了。重点是理解动画只执行一次，我们依靠不断移除添加一次动画的span标签来实现动画效果。

注意：点击时候先移除已经有的span标签，确保button中的span始终是一个