水波纹竟然这么简单？前端水波纹按钮实现

【代码】水波纹竟然这么简单？前端水波纹按钮实现。

DieHunter1024

1111人浏览 · 2024-12-08 23:21:06

DieHunter1024 · 2024-12-08 23:21:06 发布

引言

原理

效果如下

实现方案

创建CSS

监听点击事件

总结

相关代码

引言

好的交互反馈可以为用户带来积极的产品体验，作为用户体验的核心要素之一，其设计质量直接影响着用户对产品的认可度和满意度。水波纹的效果凭借其直观且形象的效果，在一些UI组件（如：material-ui）中占有一席之地，尤其是在按钮点击和触摸区域操作时显著提升了用户对于操作动作的感知。那么该效果的原理是什么？请接着往下看

原理

水波纹模仿了水体受到冲击时产生的涟漪扩散现象，当用户与界面元素互动时，水波纹特效能够在触点周围瞬间产生一圈圈向外扩散的动画效果。我们可以使用CSS实现圆角、半径变化等自定义形状的水波纹，给予其交互效果：使用放大和透明变换来表现水波纹的动画。

效果如下

实现方案

实现方式分为两步，一是使用css在原有标签中创建绝对定位的水波组件并给予其animation动画，第二步是监听点击事件，捕获涟漪开始位置和点击操作

创建CSS

通过下面的代码可以简单创建一个每秒循环一次的水波纹效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ripple</title>
    <style>
        .ripple-button {
            position: relative;
            overflow: hidden;
            background-color: #6200ee;
            color: white;
            padding: 20px 40px;
            margin: 10px;
            border: none;
            outline: none;
            cursor: pointer;
            border-radius: 4px;
            font-family: Arial;
        }

        .ripple {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.5);
            animation: ripple-effect 1s linear infinite;
            transform: scale(1);
        }

        @keyframes ripple-effect {
            from {
                opacity: 1;
                transform: scale(0);
            }

            to {
                opacity: 0;
                transform: scale(8);
            }
        }
    </style>
</head>

<body>
    <button class="ripple-button">点击我
        <span class="ripple"></span>
    </button>
</body>

</html>

监听点击事件

在点击事件触发时在对应位置创建水波起始点，思考下面的代码。

const ripple = document.querySelector('.ripple-button')
ripple.addEventListener('click', function (e) {
    const { clientX, clientY } = e
    const rippleElement = document.createElement('span');
    rippleElement.classList.add('ripple');
    this.appendChild(rippleElement);
    // 计算点击位置
    const rect = this.getBoundingClientRect();
    // 获取触发事件的元素（rect）的左上角坐标（left和top），减去涟漪元素的宽度和高度的一半，从而得到涟漪元素的中心点坐标。
    const rippleX = clientX - rect.left - (rippleElement.offsetWidth / 2);
    const rippleY = clientY - rect.top - (rippleElement.offsetHeight / 2);
    rippleElement.style.left = `${rippleX}px`;
    rippleElement.style.top = `${rippleY}px`;
    // 波浪动画结束后移除元素
    rippleElement.addEventListener('animationend', rippleElement.remove);
});

点击按钮时创建一个span标签充当水波，由于水波有初始大小所以需要计算其位置和鼠标的偏移

效果与之前的一样