如何實現一個原質化菜單項或按鈕HTML5動畫效果

原質化設計（Material Design），也叫材料化設計，是Google提出並應用於觸摸屏（移動應用）上的一種交互設計風格。

強調一種能給用戶自然反應的高級紙質觸感。其中一個實例就是在觸摸按鈕或菜單時，呈現一個以觸摸點爲中心位置的漣漪（水波）動畫。

要實現這樣的動畫，主要需要處理2個任務，一個是實現脈衝波效果，還有一個是檢測觸摸（點擊）位置。

1.  實現脈衝波效果

這個使用CSS3的變換很容易實現，本質上是一個帶特定底色的元素漸進放大的動畫。

在放大的同時，減小透明度，從而製造出放大並淡出的視覺效果。CSS3代碼如下：

.ripple {  
    width: 0;  
    height: 0;  
    border-radius: 50%;  
    background: rgba(255, 255, 255, 0.4);  
    transform: scale(0);  
    position: absolute;  
    opacity: 1;  
}  
.rippleEffect {  
    animation: rippleDrop .6s linear;  
}  
@keyframes rippleDrop {  
    100% {  
        transform: scale(2);  
        opacity: 0;  
    }  
} 

2. 獲取點擊位置

我們需要的位置信息是相對於當前按鈕左上角的偏移（即相對座標），

通過點擊事件可以獲取鼠標位置，通過元素的offset可以獲取元素位置，兩者相減就可以得到相對座標。

這個座標是水波動畫的圓點（中心點）的座標，那麼要得到水波元素的左上座標，還要再減去其父元素（即按鈕）的1/2寬度（或高度）。

我們使用jQuery實現，代碼如下：

    $("button").click(function(e) {  
        var posX = $(this).offset().left,  
            posY = $(this).offset().top,  
            buttonWidth = $(this).width(),  
            buttonHeight = $(this).height();  
      
        // 取寬高中的較大者  
        if (buttonWidth >= buttonHeight) {  
            diameter = buttonWidth;  
        } else {  
            diameter = buttonHeight;  
        }  
      
        // 獲取水波元素座標原點  
        var x = e.pageX - posX - diameter / 2;  
        var y = e.pageY - posY - diameter / 2;  
    });  

3. 把水波元素添加爲按鈕元素的子元素並設置水波動畫樣式

$(this).prepend("<span class='ripple'></span>");  
  
$(".ripple").css({  
    width: buttonWidth,  
    height: buttonHeight,  
    top: y + 'px',  
    left: x + 'px'  
}).addClass("rippleEffect"); 

這樣我們就實現了一個原質化的按鈕（菜單項可以參照實現）。