你的位置:首页 > 网页设计

[网页设计]4种基于SVG的Material Design风格按钮点击波特效


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

在线预览    源码下载

 制作方法

 HTML结构

该按钮点击波使用的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">
  <svg version="1.1" ="http://www.w3.org/2000/svg"
            ="http://www.w3.org/1999/xlink" focusable="false">
    <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样式

点击波的主要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。另外还将波形对象放置在按钮的左上角位置。

 JAVASCRIPT

为了制作动态按钮点击波效果,特效中使用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);
      });
    }
  };
})();