用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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
又一个图片自动缩小的JS代码
Mar 10 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
在Python中定义一个常量的方法
2018/11/10 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python装饰器常见使用方法分析
2019/06/26 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
浅谈JS的原型和原型链
2021/06/04 Javascript
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL