【分享】模仿jquery的animate（自定义动画）

原创地址：idche 博客 http://www.cnblogs.com/idche/archive/2010/06/13/1758006.html

首先要说，他们没有jquery的animate那么强大。

jquery的自定义动画很强大，使得我们在网页里添加动画变得容易。

引入一个巨大的代码框架一直是我不太喜欢的，所以我写了一个简单的自定义动画。

1：实例演示

OK这个动画代码当然没有jquery的animate那么强大。看下面的测试。

他现在能完成的功能 比如 width height margin padding top lef 等等吧。

由于alpha（透明度） 需要的判断比较多，所以还没加进去。

看下面的3个测试，我分别使用了 这3个代码

 

jelle( ' cc ' ).animate({width: ' 300px ' }, 500 , function (){ this .style.backgroundColor = ' #333 ' });

 

 

jelle( ' cc ' ).animate({height: ' 300px ' }, 500 , function (){ this .style.backgroundColor = ' #000 ' });

 

 

jelle( ' cc ' ).animate({width: ' 200px ' ,height: ' 200px ' }, 500 , function (){ this .style.backgroundColor = '' });

 

 

 

 

 

 

这是一个测试的DIV

jelle('cc').animate({width:'300px'},500,function(){this.style.backgroundColor='#333'});
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});

2：使用说明

你可以看出他的用法基本上跟jquery一样。

jelle(id).animate({key:val},time,callback);

传递一个对象ID 然后设置对应的变化值,动画用时,回调函数。

3：源码解析

 

var jelle = function (id){
var elem = document.getElementById(id), // 对象
f = j = 0 ,callback,_this = {}, // j动画总数
tween = function (t,b,c,d){ return - c * (t / =d)*(t-2) + b}
// 算子你可以改变他来让你的动画不一样
_this.execution = function (key,val,t){
var s = ( new Date()).getTime(),d = t || 500 ,
b = parseInt(elem.style[key]) || 0 ,
c = val - b;
( function (){
var t = ( new Date()).getTime() - s;
if (t > d){
t = d;
elem.style[key] = tween(t,b,c,d) + ' px ' ;
// if(++f==j && callback){callback.apply(elem)}
++ f == j && callback && callback.apply(elem);
// 这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
// 感觉很不错。
return _this;
}
elem.style[key] = tween(t,b,c,d) + ' px ' ;
setTimeout(arguments.callee, 10 );
// arguments.callee 匿名函数递归调用
})();
// 只能写一个这个了。
}
_this.animate = function (sty,t,fn){
// sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数
callback = fn;
// 多key 循环设置变化
for ( var i in sty){
j ++ ; // 动画计数器用于判断是否所有动画都完成了。
_this.execution(i,parseInt(sty[i]),t);
}
}
return _this;
}

 

他其实很简单。呵呵。

 

4：源码

全部代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
</ head >

< body >
< div style ="position:relative; height:300px;" >
< div style ="width:200px; height:200px; border:1px solid #CCC; position:absolute; overflow:hidden;" id ="cc" ></ div >
</ div >
< script type ="text/javascript" >
var jelle = function (id){
var elem = document.getElementById(id), // 对象
f = j = 0 ,callback,_this = {}, // j动画总数
tween = function (t,b,c,d){ return - c * (t / =d)*(t-2) + b}
// 算子你可以改变他来让你的动画不一样
_this.execution = function (key,val,t){
var s = ( new Date()).getTime(),d = t || 500 ,
b = parseInt(elem.style[key]) || 0 ,
c = val - b;
( function (){
var t = ( new Date()).getTime() - s;
if (t > d){
t = d;
elem.style[key] = tween(t,b,c,d) + ' px ' ;
// if(++f==j && callback){callback.apply(elem)}
++ f == j && callback && callback.apply(elem);
// 这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
// 感觉很不错。
return _this;
}
elem.style[key] = tween(t,b,c,d) + ' px ' ;
setTimeout(arguments.callee, 10 );
// arguments.callee 匿名函数递归调用
})();
// 只能写一个这个了。
}
_this.animate = function (sty,t,fn){
// sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数
callback = fn;
// 多key 循环设置变化
for ( var i in sty){
j ++ ; // 动画计数器用于判断是否所有动画都完成了。
_this.execution(i,parseInt(sty[i]),t);
}
}
return _this;
}
</ script >


< textarea id ="test1" style ="width:500px; height:100px;" >
jelle('cc').animate({width:'300px',height:'250px'},500,function(){this.style.backgroundColor='#333'});
</ textarea >
< input type ="button" onclick ="eval(document.getElementById('test1').value)" value ="运行代码" />
< br />
< textarea id ="test2" style ="width:500px; height:100px;" >
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
</ textarea >
< input type ="button" onclick ="eval(document.getElementById('test2').value)" value ="运行代码" />
< br />
< textarea id ="test3" style ="width:500px; height:100px;" >
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});
</ textarea >
< input type ="button" onclick ="eval(document.getElementById('test3').value)" value ="运行代码" />




</ body >
</ html >

 

下面是压缩以后的JS

 

压缩以后的JS

var jelle = function (o){ var e = document.getElementById(o),p = j = 0 ,h,c = {};c.execution = function (b,i,k){ var f = ( new Date).getTime(),g = k || 500 ,l = parseInt(e.style[b]) || 0 ,n = i - l;( function (){ var a = ( new Date).getTime() - f; if (a > g){a = g; var m = e.style,d = a;a =- n * (d / =g)*(d-2)+l;m[b]=a+"px";++p==j&&h&&h.apply(e);return c}m=e.style;d=a;a=-n*(d / = g) * (d - 2 ) + l;m[b] = a + " px " ;setTimeout(arguments.callee, 10 )})()};c.animate = function (b,i,k){h = k; for ( var f in b){j ++ ;c.execution(f,parseInt(b[f]),i)}}; return c};

 

 

根据自己的需要去改变他，既可以让你的页面使用少的JS代码，又可以加快自己的开发效率。我喜欢把一些小的功能封装起来。使用更加方便。

转载于:https://www.cnblogs.com/idche/archive/2010/06/13/1758006.html