如何实现一个原质化菜单项或按钮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");

这样我们就实现了一个原质化的按钮（菜单项可以参照实现）。

你可以自己在线试试看（注意踏得网默认加载了jQuery库）。

by iefreer