Material Design的按鈕，漣漪效果

CPLBill 8年前發布 | 23K 次閱讀前端技術 Material Design

寫在前面：
這是一篇菜鳥的學習筆記，記錄實現過程中的難點，沒有考慮兼容、性等問題。供新手參考，也希望前輩們指點。

編寫過程記錄：

寫個漣漪效果真的折騰了好幾天。唉，畢竟沒有系統學過js、jquery、css。這個過程中的@KeyFrames也是摸索了幾天，遇到各種低級錯誤。

大體思路：

漣漪效果實際上就是一個擴展開的圓形div。鼠標點擊按鈕記錄其坐標，通過相關計算得出產生漣漪的div坐標。然后將該div放置好后開啟展開動畫如此而已。

效果描述：

直接看動畫吧。

waves.gif

代碼要點：

用這個方法來得到鼠標點擊坐標：
```
$(".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");//播放動畫

完整代碼：

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

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

        var box = $(this);


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

        //第一次沒有漣漪div，動態生成
        if(wavesDiv[0] == null){
            var div = "<div class='waves-effect'></div>";
            box.append(div);
            wavesDiv = box.find("div");
        }


        //設置按鈕樣式為’waves-effect‘即去掉動畫樣式’waves-effect-animation‘
        wavesDiv[0].className = '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("waves-effect-animation");//播放動畫
    });
});
</script>
<style>
    .waves{
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        border-radius: 3px;
        display: inline-block;
        outline:none;
        border:0;
        overflow: hidden;
        position:relative;
        opacity: 0.9;
        text-align:center;
    }
    .waves:hover{
        opacity: 1;
        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.20),0 3px 12px 0 rgba(0,0,0,0.16);
    }

    .waves-effect{
        border-radius: 100%;
        background-color:#D8D8D8;
        left: 20px;
        top: 20px;
        transform: scale(0);
        width: 10px;
        height: 10px;
        position:absolute;

    }

    .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;  
    }
    @keyframes animation-definition {  
        from{  
            transform: scale(0.1);  
            opacity: 1;
        }  

        to{  
            transform: scale(2); /*因為漣漪的大小為標簽的最長邊，為了保證點擊標簽邊緣時，漣漪也能覆蓋整個標簽，scale值最小應為2*/
            opacity: 0;            
        } 
    }    
</style>

</head>
<body>
    <b>不需要加p標簽</b>
    <br/>
    <br/>

    <button class="waves" style="width: 125px;height: 40px;background-color: #27C4B4;color: white">    
        Button1
    </button>
    <button class="waves" style="width: 125px;height: 40px;background-color: #EE6E73;color: white">    
        Button2
    </button>
    <br/><br/>
    <b>需要加p標簽<b>
    <br/>
    <br/>
    <div class="waves" style="width: 125px;height: 40px;background-color: #311B92;color: white">
        <p style="line-height:40px; display:inline;">Div</p>
    </div>
    <a href="#" class="waves" style="width: 125px;height: 40px;background-color: #FF9800;color: white">
        <p style="line-height:40px; display:inline;">A</p>
    </a>
    <span class="waves" style="width: 125px;height: 40px;background-color: #607D8B;color: white">
        <p style="line-height:40px; display:inline;">Span</p>
    </span>
</body>
</html>

后續內容：

目前只有button使用該樣式最方便（一開始也是只為button而寫的），至于div、a、span等標簽顯示文字還需要嵌套一個p標簽
為了方便重復使用，還需要將css、js提取出來

來自：http://www.jianshu.com/p/44e256491928

本文由用戶 CPLBill 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1475216329150.html

前端技術 Material Design