【分享】模仿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



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代码，又可以加快自己的开发效率。我喜欢把一些小的功能封装起来。使用更加方便。

posted @   Jun.lu  阅读(5090)  评论(7)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae