转载

4种基于SVG的Material Design风格按钮点击波特效

简要教程

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

查看演示 下载插件

制作方法

HTML结构

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

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

关于SVG 元素和元素详细的使用方法可以参考： SVG defs元素、symbol元素和use元素

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);       });     }   }; })();

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/html5/SVG/201509152574.html

正文到此结束

所属分类：编程技术

本文标签： js HTML ip 代码 java HTML5 http CSS src UI 插件 jquery list tar XML Document
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二