我们经常会看到一个按钮上,然后一点击就会出现水波覆盖整个按钮的效果,效果大致如下:

水波按钮

实现方案

主要有两个实现方案,一个是利用canvas绘制出水波的效果,这种比较简单,利用canvas的arc可以绘制圆,我们将点击的地方作为圆心,然后利用requestAnimationFrame进行重复绘制,每次绘制的时候半径变大一点,当半径可以覆盖按钮则停止绘制。关键代码如下:

var draw = function(x, y, r) {
    context.clearRect(0, 0, width, height);
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI * 2);
    context.fillStyle = '#000';
    context.globalAlpha = 0.2;
    context.fill();
    if(r < width*1.5) {
        requestAnimFrame(function() {
            draw(x, y, r + 2);
        })
    }
}

canvas实现水波按钮

另外一种就是做一个半径逐渐变大的animation,然后点击的时候确定圆心,这种比canvas稍微简单一些,关键代码如下:

document.getElementById('wave_btn').addEventListener('click', function(e) {
    if(e.target.querySelector('.wave')) {
        e.target.removeChild(e.target.querySelector('.wave'));
    }
    var _$div = document.createElement('div');
    _$div.setAttribute('class', 'wave');
    _$div.style.left = e.offsetX + 'px';
    _$div.style.top = e.offsetY + 'px';
    e.target.appendChild(_$div);
})

animation实现水波按钮

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字