用js实现的模拟jquery的animate自定义动画(2.5K)


Posted in Javascript onJuly 20, 2010

后来发现还不错。不如继续写下去。
这个版本基本上跟jquery的animate一样了。
我是说效果基本上一样了。(效率还没测试过。);
如果有专业测试人员 帮我测试下。
1:功能说明

兼容主流浏览器。
1:支持回调函数;
  2:支持级联动画调用;
3:支持delay动画队列延迟;
  4:支持stop停止动画;
5:支持opacity透明度变化;
6:支持+= -= *= /=操作;
7:支持单位操作(px, %);
2:使用说明
jelle(A).animate(B, C, D);
A:需要执行动画的dom元素ID;
B:动画的主要参数传递{key,val,key2,val2};比如{width:'100px',height:'+=100px',opacity:0.5},
opacity--透明度变化 支持+= -= *= /=操作。
C:动画执行用时,以毫秒为单位;[可选 默认500毫秒];
D:回调函数;[可选]
3:方法说明
1:animate()方法
jelle('cc').animate({width:'100px'},300,function(){alert('完成')});// 是 cc 的宽度在300毫秒的时间变化到100px 动画结束 弹出 ‘完成'
2:stop()方法
jelle('cc').stop();//停止正在 cc 对象上播放的动画。
3:delay()方法
jelle('cc').delay(1000).animate({width:'100px'});//cc 的宽度发生变化 将被延迟1秒执行。
我会一直把他完善下去。

var jelle = function(id){ 
var $ = function(id){ return document.getElementById(id); }, 
elem = $(id),//对象 
f = 0, _this = {}, lazy = 10, lazyque = 10,// f动画计数器 lazy动画延迟 lazyque队列延迟 
// 算子你可以改变他来让你的动画不一样 
tween = function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b}, 
// adv 用于+= -= *= /=操作 
adv = function(val, b){ 
var va, re= /^([+-\\*\/]=)([-]?[\d.]+)/ ; 
if (re.test(val)){ 
var reg = val.match(re); 
reg[2] = parseFloat(reg[2]); 
switch ( reg[1] ){ 
case '+=': 
va = reg[2]; 
break; 
case '-=': 
va = -reg[2]; 
break; 
case '*=': 
va = b*reg[2] - b; 
break; 
case '/=': 
va = b/reg[2] - b; 
break; 
} 
return va; 
} 
return parseFloat(val) - b; 
} 
// elem.animate 读取用于当前dom元素上的动画队列 
elem.animate = elem.animate || []; 
//stop 功能要使用的 
jelle[id]= {}; 
jelle[id]['stop'] = true; 
//alert(jelle[id]['stop']) 
// 统一队列入口 用于方便设置延迟,与停止 
_this.entrance = function(fn, ags, lazytime){ 
//fn 调用函数 ags 参数 lazytime 延迟时间 
setTimeout(function(){ 
fn(ags[0], ags[1], ags[2]); 
}, (lazytime || 0)); 
} 
// 停止动画 此方法还不能用 
_this.stop = function(){ 
jelle[id]['stop'] = false; 
elem.animate.length=0; 
$(id).animate.length=0; 
return _this; 
} 
// 队列操作 
_this.queue = function(){ 
if (elem.animate && ++f == elem.animate[0].length){ 
f = 0;// 清空计数器 
elem.animate[0].callback ? elem.animate[0].callback.apply(elem) : false; 
// 判断是否有动画在等待执行 
if (elem.animate.length > 1){ 
elem.animate[0].callback = elem.animate[1].callback; 
elem.animate = $(id).animate || [];// 从dom对象上获取最新动画队列 
elem.animate.shift();// 清除刚执行完的动画队列 
$(id).animate = elem.animate;// 把新的队列更新到dom 
var ea = elem.animate[0]; 
// 循环播放队列动画 
for(var i = 0; i < ea.length; i++){ 
ea[i][0] === 'opacity' ? _this.entrance(_this.alpha, [ea[i][1], ea[i][2]], lazyque): 
_this.entrance(_this.execution, [ea[i][0], ea[i][1], ea[i][2]], lazyque); 
} 
}else{ 
elem.animate.length = 0; // 队列清楚 
$(id).animate.length = 0; // 队列清楚 
} 
} 
} 
//设置lazy方法,以后的队列动画延迟时间 
_this.delay = function(val){ 
lazyque = val; 
return _this; 
} 
//动画变化 
_this.execution = function(key, val, t){ 
//alert(val) 
var s = (new Date()).getTime(), d=t || 500 , 
b = parseFloat(elem.style[key]) || 0 , 
c = adv(val, b) ,// adv用于设置高级操作比如 += -= 等等 
un = val.match(/\d+(.+)/)[1];// 单位 
(function(){ 
var t = (new Date()).getTime() - s; 
if (t > d){ 
t = d; 
elem.style[key] = parseInt(tween(t, b, c, d)) + un; 
_this.queue(); // 操作队列 
return _this; 
} 
elem.style[key] = parseInt(tween(t, b, c, d)) + un; 
jelle[id]['stop'] && setTimeout(arguments.callee, lazy); 
// _this.entrance(arguments.callee,[1,1,1],lazy); 
// arguments.callee 匿名函数递归调用 
})(); 
} 
// 入口 
_this.animate = function(sty, t, fn){ 
// sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数 
var len = elem.animate.length;// len查看动画队列长度 
elem.animate[len] = []; 
elem.animate[len].callback = fn; 
//多key 循环设置变化 
for(var i in sty){ 
elem.animate[len].push([i, sty[i], t]); 
if(len == 0){ 
i == 'opacity' ? _this.entrance(_this.alpha, [sty[i], t], lazyque) : 
_this.entrance(_this.execution, [i, sty[i], t], lazyque); 
} 
} 
$(id).animate = elem.animate;//把新的动画队列添加到dom元素上 
return _this; 
} 
// 透明度变化的代码 
_this.alpha = function(val, t){ 
var s = (new Date()).getTime(), 
d = t || 500, b, c; 
if( document.defaultView ){ 
b = document.defaultView.getComputedStyle(elem,null)['opacity'] || 1, 
c = adv(val,b) * 100; 
(function(){ 
var t = (new Date()).getTime() - s; 
if(t > d){ 
t = d; 
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100; 
_this.queue(); // 队列控制 
return _this; 
} 
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100; 
jelle[id]['stop'] && setTimeout(arguments.callee, lazy); 
})() 
}else{ 
b = elem.currentStyle['filter'] ? 
(elem.currentStyle['filter'].match(/^alpha\(opacity=([\d\.]+)\)$/))[1]/100 : 1; 
c = adv(val, b) * 100; 
(function(){ 
var t = (new Date()).getTime() - s; 
if (t > d){ 
t = d; 
elem.style['filter']='alpha(opacity='+ tween(t, (100 * b), c, d) +')'; 
_this.queue(); // 队列控制 
return _this; 
} 
elem.style['filter'] = 'alpha(opacity='+ tween(t, (100*b) , c, d) +')'; 
jelle[id]['stop'] && setTimeout(arguments.callee, lazy); 
})() 
} 
} 
return _this; 
}

代码打包下载

程序可能每天都在修改。如果想要最新的ainimate 可以email联系我。

上面的代码已经不是最新的了。

这两天又修正了几个错误的地方。
本文来自博客园 jelle 博客 http://www.cnblogs.com/idche/

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js 金额文本框实现代码
Feb 14 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
Vue+Django项目部署详解
May 30 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
一个简单的js动画效果代码
Jul 20 #Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 #Javascript
轻量级 JS ToolTip提示效果
Jul 20 #Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 #Javascript
根据出生日期自动取得星座的js代码
Jul 20 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php常用的工具开发整理
2019/09/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
Python中pygame安装方法图文详解
2015/11/11 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python selenium操作cookie的实现
2020/03/18 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python如何执行系统命令
2020/09/23 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
劳资人员岗位职责
2013/12/19 职场文书
上班早退检讨书
2014/01/09 职场文书
《分一分》教学反思
2014/04/13 职场文书
法制宣传口号
2014/06/16 职场文书
优秀高中学生评语
2014/12/30 职场文书
安阳殷墟导游词
2015/02/10 职场文书
师范生小学见习总结
2015/06/23 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript