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