用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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
js停止输出代码
2008/07/20 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python random模块常用方法
2014/11/03 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python构建图像分类识别器的方法
2019/01/12 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python request 模块详细介绍
2020/11/10 Python
中医临床专业自我鉴定范文
2014/01/15 职场文书
社区活动邀请函范文
2014/01/29 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
公司新员工欢迎词
2015/09/30 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
初中团支书竞选稿
2015/11/21 职场文书
九年级英语教学反思
2016/02/15 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
MySQL分库分表详情
2021/09/25 MySQL
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python