4种基于SVG的Material Design风格按钮点击波特效 - 爱上程序猿_H5之家

svgripples是一款效果非常炫酷的基于SVG的Material Design风格按钮点击波特效。该点按钮击波特效共有4种不同的效果，分别为：圆形波，圆形渐变波，多边形波和线性渐变波。特效中通过TweenMax.js和SVG相结合，制作出邻人惊叹的点击波效果。

在线预览源码下载

制作方法 HTML结构

该按钮点击波使用的SVG元素的代码非常简单。SVG中使用了<symbol>元素-它用于定义可重复使用的符号。并在<symbol>元素放置需要的SVG图形。

xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">

</symbol>

</svg>

</div>

为了使用上面定义的<symbol>元素，在按钮上使用了<use>元素-它可以在SVG图像中多次重用一个预定义的SVG图形。它通过xlink:href属性来指向前面定义的<symbol>元素的ID。

Click for Ripple

</svg>

</button>

CSS样式

点击波的主要CSS样式只有两句：

.ripple-obj {

height: 100%;

pointer-events: none;

position: absolute;

top: 0;

left: 0;

z-index: 0;

width: 100%;

fill: #0c7cd5;

}

.ripple-obj use {

opacity: 0;

}

由于只需要在.ripple-obj的父元素上产生点击波效果，所以使用pointer-events: none;来阻止SVG上产生点击波。

点击波在开始的时候是不可见的，所以设置它的透明度为0。另外还将波形对象放置在按钮的左上角位置。

JAVASCRIPT

为了制作动态按钮点击波效果，特效中使用GreenSock的TweenMax库来制作SVG动画。rippleAnimation()函数是整个点击波效果的主要动画函数。

function rippleAnimation(event, timing) {

var tl = new TimelineMax();

x = event.offsetX,

y = event.offsetY,

w = event.target.offsetWidth,

h = event.target.offsetHeight,

offsetX = Math.abs( (w / 2) - x ),

offsetY = Math.abs( (h / 2) - y ),

deltaX = (w / 2) + offsetX,

deltaY = (h / 2) + offsetY,

scale_ratio = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

tl.fromTo(ripple, timing, {

x: x,

y: y,

transformOrigin: '50% 50%',

scale: 0,

opacity: 1,

ease: Linear.easeIn

},{

scale: scale_ratio,

opacity: 0

});

return tl;

}

return {

init: function(target, timing) {

var button = document.getElementById(target);

button.addEventListener('click', function(event) {

rippleAnimation.call(this, event, timing);

});

}

};

})();