Material Design的按钮，涟漪效果

写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。

这个涟漪效果是在这篇博客的指导下完成的。

编写过程记录：

写个涟漪效果真的折腾了好几天。唉，毕竟没有系统学过js、jquery、css。这个过程中的@KeyFrames也是摸索了几天，遇到各种低级错误。

大体思路：

涟漪效果实际上就是一个扩展开的圆形div。鼠标点击按钮记录其坐标，通过相关计算得出产生涟漪的div坐标。然后将该div放置好后开启展开动画如此而已。

效果描述：

直接看动画吧。

waves.gif

Waves链接展示

代码要点：

• 用这个方法来得到鼠标点击坐标：

$(".waves").mousedown(function(e) {})

• 得到当前按钮的涟漪div：

var wavesDiv = box.find("div");

• css3动画的定义：

@keyframes animation-definition {  
        from{  
            transform: scale(0.1);  
            opacity: 1;
        }  
        
        to{  
            transform: scale(2); /*因为涟漪的大小为标签的最长边，为了保证点击标签边缘时，涟漪也能覆盖整个标签，scale值最小应为2*/
            opacity: 0;         
        } 
    }  

• 将动画“当作”css样式

.waves-effect-animation{
        animation: animation-definition 1s ease-out;  
        /*兼容各大浏览器*/
        -moz-animation: animation-definition 1s ease-out;  
        -webkit-animation: animation-definition 1s ease-out;  
        -o-animation: animation-definition 1s ease-out;  
    }

• js中使用动画

//设置涟漪div样式，准备播放动画
        wavesDiv.css({
            width: wH,
            height: wH,
            left: nX,
            top: nY
        }).addClass("waves-effect-animation");//播放动画

完整代码：

    不需要加p标签
    

    


     
        Button1
    
     
        Button2
    
    


    需要加p标签
    

    

    

        
Div
    
    
        
A
    
    
        
Span
    

后续内容：

• 目前只有button使用该样式最方便（一开始也是只为button而写的），至于div、a、span等标签显示文字还需要嵌套一个p标签
• 为了方便重复使用，还需要将css、js提取出来

---

更新
分离html、css、js代码。查看更新内容，可移步Maves实例代码

---

---

更新，2016.10.6
本次更新使用了类以及单例模式重构代码，更新内容如下

---

只附上js文件更新部分，其他可移步Toast示例代码：

$(document).ready(function(){

    $(".mmd-waves").mousedown(function(e) {
        var m = new MavesClass();
        m.showWaves(this,e);
    });
});
//涟漪类，使其相对独立
function MavesClass(){
    if(MavesClass.instance !== undefined){
        return MavesClass.instance;
    }
    MavesClass.instance = this;
    
    this.showWaves = function(_this,e){
        box = $(_this);
        wavesDiv = box.find("div");
        //第一次没有涟漪div，动态生成
        if(wavesDiv[0] == null){
            var div = "
";
            box.append(div);
            wavesDiv = box.find("div");
        }
        

        //设置按钮样式为’waves-effect‘即去掉动画样式’waves-effect-animation‘
        wavesDiv[0].className = 'mmd-waves-effect';
        
        //计算涟漪坐标（折算成左上角坐标而非中心点），涟漪大小（取外标签最长边）
        var wH = box.width() > box.height() ? box.width() : box.height();
        var iX = e.pageX - box.offset().left;
        var iY = e.pageY - box.offset().top;
        var nX = iX - wH/2;
        var nY = iY - wH/2;

        //设置涟漪div样式，准备播放动画
        wavesDiv.css({
            width: wH,
            height: wH,
            left: nX,
            top: nY
        }).addClass("mmd-waves-effect-animation");//播放动画
    }
}

附上源码：

Maves示例代码