标签：
svgripples是一款效果非常炫酷的基于SVG的Material Design风格按钮点击波特效。该点按钮击波特效共有4种不同的效果，分别为：圆形波，圆形渐变波，多边形波和线性渐变波。特效中通过TweenMax.js和SVG相结合，制作出邻人惊叹的点击波效果。
该按钮点击波使用的SVG元素的代码非常简单。SVG中使用了<symbol>元素-它用于定义可重复使用的符号。并在<symbol>元素放置需要的SVG图形。
|
1
2
3
4
5
6
7
8
|
<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true"> <symbol id="ripply-scott" viewBox="0 0 100 100"> <circle id="ripple-shape" cx="1" cy="1" r="1"/> </symbol> </svg></div> |
为了使用上面定义的<symbol>元素，在按钮上使用了<use>元素-它可以在SVG图像中多次重用一个预定义的SVG图形。它通过xlink:href属性来指向前面定义的<symbol>元素的ID。
|
1
2
3
4
5
6
|
<button id="js-ripple-btn" class="button styl-material"> Click for Ripple <svg class="ripple-obj" id="js-ripple"> <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple"></use> </svg></button> |
点击波的主要CSS样式只有两句：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.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。另外还将波形对象放置在按钮的左上角位置。
为了制作动态按钮点击波效果，特效中使用GreenSock的TweenMax库来制作SVG动画。rippleAnimation()函数是整个点击波效果的主要动画函数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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); }); } };})(); |
4种基于SVG的Material Design风格按钮点击波特效
标签：
原文地址：http://www.cnblogs.com/w2bc/p/4910225.html
