用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 相关文章推荐
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
react实现菜单权限控制的方法
Dec 11 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
一个简单的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/01/07 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python简单实例训练(21~30)
2017/11/15 Python
python验证码识别实例代码
2018/02/03 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
企业行政文员岗位职责
2013/12/03 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
自荐信格式范文
2015/03/04 职场文书
个人德育工作总结
2015/03/05 职场文书
捐书活动倡议书
2015/04/27 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python