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

    水波按钮

    实现方案

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

    1. var draw = function(x, y, r) {
    2.     context.clearRect(0, 0, width, height);
    3.     context.beginPath();
    4.     context.arc(x, y, r, 0, Math.PI * 2);
    5.     context.fillStyle = '#000';
    6.     context.globalAlpha = 0.2;
    7.     context.fill();
    8.     if(r < width*1.5) {
    9.         requestAnimFrame(function() {
    10.             draw(x, y, r + 2);
    11.         })
    12.     }
    13. }

    canvas实现水波按钮

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

    1. document.getElementById('wave_btn').addEventListener('click', function(e) {
    2.     if(e.target.querySelector('.wave')) {
    3.         e.target.removeChild(e.target.querySelector('.wave'));
    4.     }
    5.     var _$div = document.createElement('div');
    6.     _$div.setAttribute('class', 'wave');
    7.     _$div.style.left = e.offsetX + 'px';
    8.     _$div.style.top = e.offsetY + 'px';
    9.     e.target.appendChild(_$div);
    10. })

    animation实现水波按钮

    回到顶部
    我要评论

    所有评论

      相关文章