最近看到了AngularJS-material的网站，看到里面有一个点击出现水纹的效果，非常漂亮。可以看到点击上面的元素的时候，元素会出现水波荡漾的效果，我想了一下实现原理，主要借助CSS3的<code>transform:scale()</code>来实现的。<p>如下图
水纹效果.png
首先介绍一下原理，第一步是在点击元素中动态添加一个<code>span</code>标签，然后为这个标签设置初始类名和相对于父节点的位置。这里需要有两点注意：（1）初始类名，要让添加<code>span</code>标签缩放为0，代码如下：
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
（2）要通过监听事件来实现动态改变添加<code>span</code>标签的位置，让其永远位于鼠标点击的中点。代码如下
x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
y=event.pageY-this.offsetTop-CSS(span,'height')/2;
第二步是每次在动态添加这个<code>span</code>标签的时候，都要把上一个添加的删除，让其新添加的时候，可以继续添加类名。<p>
第三步是通过CSS3的方式实现水纹的效果，代码如下：
.animate{
-webkit-animation: ripple .5s linear;
-moz-animation: ripple .5s linear;
-ms-animation: ripple .5s linear;
-o-animation: ripple .5s linear;
animation: ripple .5s linear
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(1.5)
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(0.5)
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(0.5)
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(0.5)
}
}
下面是两种实现方式，第一种是原生js实现的，第二种是通过angularJS实现的。下面是效果
实现效果.png
原生JS实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#content{
width: 200px;
height: 50px;
border: 1px solid gray;
background: slateblue;
position: absolute;
left: 123px;
top: 321px;
overflow: hidden;
}
.animate{
-webkit-animation: ripple .5s linear;
-moz-animation: ripple .5s linear;
-ms-animation: ripple .5s linear;
-o-animation: ripple .5s linear;
animation: ripple .5s linear
}
#content #spanStyle{
border-radius: 75px;
position: absolute;
background: salmon;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(1.5)
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(0.5)
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(0.5)
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(0.5)
}
}
</style>
<body>
<div id="content">
</div>
</body>
<script>
window.onload= function () {
var content=document.getElementById("content");
var eventHandle= function (obj,type,fn) {
if(obj.addEventListener){
obj.addEventListener(type,fn,false)
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn)
}
};
var setCSS3=function(obj,attr,value){
var sTr="";
var sVal="";
var arr=["Webkit","Moz","O","ms",""];
if(! obj["$Transform"])
{
obj["$Transform"]={};
}
obj["$Transform"][attr]=parseInt(value);
for( sTr in obj["$Transform"])
{
switch(sTr)
{
case 'scale':
case 'scaleX':
case 'scaleY':
sVal+=sTr+"("+(obj["$Transform"][sTr]/100)+") ";
break;
case 'rotate':
case 'rotateX':
case 'rotateY':
sVal+=sTr+"("+(obj["$Transform"][sTr])+"deg) ";
break;
case 'translateX':
case 'translateY':
case 'translateZ':
sVal+=sTr+"("+(obj["$Transform"][sTr])+"px) ";
break;
}
}
for(var i=0;i<arr.length;i++)
{
obj.style[arr[i]+"Transform"]=sVal;
}
};
var CSS= function (obj,attr,value) {
if(arguments.length==2){//查看有有几个参数，如果有两个参数就执行，此时为获取css属性值
if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'||attr=='rotateY'||attr=='scaleX'||attr=='scaleY'||attr=='translateY'||attr=='translateX')//如果是css3中的属性
{
if(! obj.$Transform)
{
obj.$Transform={};
}
switch(attr)
{
case 'scale':
case 'scaleX':
case 'scaleY':
return typeof(obj.$Transform[attr])=='number'?obj.$Transform[attr]:100;//判断obj.$Transform[attr]是否属于number类型，如果是就返回相应值
break;
default:
return obj.$Transform[attr]?obj.$Transform[attr]:0;
}
}//如果不是CSS3样式
var sCur=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];//传统css属性返回
if(attr=='opacity'){
return Math.round((parseFloat(sCur)*100));
}
else{
return parseInt(sCur);
}
}
else if(arguments.length==3)//如果有3个参数，此时为设置css属性
{
switch(attr){ //如果为css3属性，就用css3设置函数。
case 'scale':
case 'scaleX':
case 'scaleY':
case 'rotate':
case 'rotateX':
case 'rotateY':
case 'translateZ':
case 'translateX':
case 'translateY':
setCss3(obj, attr, value);
break;
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
if(typeof value=="string")
{
obj.style[attr]=value;
}
else
{
obj.style[attr]=value+'px';
}
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value+")";
obj.style.opacity=value/100;
break;
default:
obj.style[attr]=value;
}
}
return function (attr_in, value_in){css(obj, attr_in, value_in)};
};
var hasClassName=function(obj,className){
var isSpourtClassList='classList' in document.documentElement;
if(isSpourtClassList){
return obj.classList.contains(className)
}else{
var isContain=obj.className.indexOf(className)>-1;
return isContain;
}
};
var addClass= function (obj,className) {
var isSpourtClassList='classList' in document.documentElement;
if(isSpourtClassList){
if(hasClassName(obj,className)!=true){
obj.classList.add(className)
}
}else{
if(hasClassName(obj,className)!=true){
obj.className+=obj.className
}
}
};
var removeClass= function (obj, className) {
var isSpourtClassList='classList' in document.documentElement;
if(isSpourtClassList){
if(hasClassName(obj,className)){
obj.classList.remove(className)
}
}else{
if(hasClassName(obj,className)){
obj.className-=obj.className
}
}
}
var animate= function (target) {
this.obj=target;
};
animate.prototype={
addEffect: function () {
var that=this;
var span=document.createElement("span");
span.setAttribute("id","spanStyle");
//var spanRemove=that.obj.
eventHandle(that.obj,'click', function (e) {
var event=e ||window.event;
var x;
var y;
var spanS=document.getElementById("spanStyle");
if(spanS){
that.obj.removeChild(spanS);
}
that.obj.appendChild(span);
CSS(span,"width",150);
CSS(span,"height",150);
x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
y=event.pageY-this.offsetTop-CSS(span,'height')/2;
CSS(span,"left",x);
CSS(span,"top",y);
addClass(span,"animate");
},false)
},
removeEffect: function () {
}
};
state.changeFront(new animate(content));//调用一次只产生一个span
};
var state= function () {//状态控制函数
var currentState=null;
return{
changeFront: function (handle) {
currentState=handle;
currentState.addEffect();
},
changeBack: function (handle) {
currentState=handle;
currentState.removeEffect();
}
}
}()
</script>
</html>
AngularJS实现方法：
<!DOCTYPE html>
<html lang="en" ng-app="animateDemo">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-animate.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
.spanStyle{
width: 200px;
height: 50px;
position: absolute;
left: 200px;
top: 60px;
background: slateblue;
overflow: hidden;
}
.spanStyle .animateSpan{
position: absolute;
background: saddlebrown;
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate{
-webkit-animation: ripple .5s linear;
-moz-animation: ripple .5s linear;
-ms-animation: ripple .5s linear;
-o-animation: ripple .5s linear;
animation: ripple .5s linear
}
@-webkit-keyframes ripple {
100%{
opacity: 0;
-webkit-transform: scale(1.5);
}
}
@-moz-keyframes ripple {
100%{
opacity: 0;
-moz-transform: scale(1.5);
}
}
@-o-keyframes ripple {
100%{
opacity: 0;
-o-transform: scale(1.5);
}
}
@keyframes ripple {
100%{
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body ng-controller="animateController">
<div>
<span-click></span-click>
</div>
</body>
<script>
var app=angular.module('animateDemo',["templateCache","serviceModule","directiveModule"])
.controller("animateController",['$scope','createEffect', function ($scope,createEffect) {
}])
var service=angular.module("serviceModule",[])
.factory("createEffect",["$animate","$compile","$rootScope", function ($animate,$compile,$rootScope) {
var x;
var y;
var span=angular.element("<span class='animateSpan'></span>");
var scopeNew=$rootScope.$new(true);
var spanEffect=$compile(span)(scopeNew);
return{
addEffect: function (obj) {
obj.on("click", function (e) {
var e=e||event;
obj.empty();
$animate.enter(spanEffect,obj);
x= e.pageX-this.offsetLeft-parseInt($(obj).find("span").css("width"))/2;
y= e.pageY-this.offsetTop-parseInt($(obj).find("span").css("width"))/2;
$(obj).find("span").css("left",x);
$(obj).find("span").css("top",y);
obj.find("span").addClass("animate");
})
}
}
}])
var directive=angular.module("directiveModule",["serviceModule"])
.directive("spanClick",["$animate","$compile","createEffect", function ($animate,$compile,createEffect) {
return{
restrict:'EA',
replace:true,
templateUrl:'spanClick.html',
link: function (scope, ele, attr) {
/* var x;
var y;
var span=angular.element("<span class='animateSpan'></span>");
//span.attr("class","animateSpan");
var scopeNew=scope.$new(true);
var spanEffect=$compile(span)(scopeNew);
ele.bind("click", function (e) {
ele.empty();
$animate.enter(spanEffect,ele);
x= e.pageX-this.offsetLeft-parseInt($(ele).find("span").css("width"))/2;
y= e.pageY-this.offsetTop-parseInt($(ele).find("span").css("width"))/2;
$(ele).find("span").css("left",x);
$(ele).find("span").css("top",y);
ele.find("span").addClass("animate");
})*/
createEffect.addEffect(ele)
}
}
}])
var templateCache=angular.module('templateCache',[])
.run(function ($templateCache) {
$templateCache.put("spanClick.html","<div class='spanStyle'></div>")
})
</script>
</html>
