【分享】jQuery animate自定义动画的简单实现
在很久很久以前，我写过一次自定义动画的实现，现在看起来已经比较烂了，所以最近又重写了。
其实下面的源码也挺简单。所以我不再详细说明。欢迎高手指正。
如果你有兴趣可以 下载。
不对我应该还有一个问题，比如我使用jQuery 貌似不能正确获得 borderWidth。如果要进行边框宽度的变化无法得到初始值，也就没办法正确执行了。
你可以试试如何可以获得borderWidth正确的值。希望你不吝赐教(我后面自己测试只能同时获取一边的宽度 border-right-width，border-left-width,..)
/*
* space 命名空间
* win window 对象
* undef undefined
*/
;(function(space, win, undef){
// var log = function(msg){
// console.log(msg)
// }
/*
* 缓动算法
*/
var tween = {
eain:function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b}
}
/*
* 获取Element对象css属性值
*/
var css = window.getComputedStyle ?
function(a, b, c){
if( c == undefined){
b = b.replace(/([A-Z])/g, "-$1");
b = b.toLowerCase();
return window.getComputedStyle(a, null).getPropertyValue(b);
}else{
a.style[b] = c;
}
}
:function(a, b, c){
if( c == undefined){
if(b == "opacity"){
return a.style.filter.indexOf("opacity=") >= 0 ? parseFloat(a.style.filter.match(/opacity=([^)]*)/)[1]) / 100 : "1";
}else { return a.currentStyle[b] == "auto" ? 0 : a.currentStyle[b];}
}else{
if(b == "opacity"){
a.style.filter = (a.filter || "").replace(/alpha\([^)]*\)/, "") + "alpha(opacity=" + c * 100 + ")";
}else{ a.style[b] = c }
}
}
var $ = function(id){
return typeof id == 'string' ? document.getElementById(id) : id;
}
/*
* 用于规范 需要变化对象的 key/vlaue
*/
var getJsonMap = function(jsonMap){
var arr = [];
var a = null;
for(a in jsonMap){
var json = {};
var test = String(jsonMap[a]).match(/(\d+)($|([a-z]+))/);
json.interval = null;
json.style = a;
json.val = typeof jsonMap[a] == "number" ? jsonMap[a] : parseFloat(test[1]);
json.px = test[3];
arr[arr.length] = json;
}
return arr;
}
/*
* animate 开始
* id String|Element
* jsonMap json对象
* time 时长
* callBack 回调函数，将会接收当前element对象作为第一个参数
*/
var Animate = function(id, jsonMap, time, callBack){
if( !(this instanceof win[space]) ){
return new Animate(id, jsonMap);
}
this.init(id, jsonMap, time, callBack);
}
Animate.prototype = {
init:function(id, jsonMap, time, callBack){
this.config = {
ele:$(id),
delay:0,
jsonMap:getJsonMap(jsonMap),
time: time || 400,
callBack: callBack === undef ? typeof time == "function" ? time : undef : callBack
}
return this;
},
/*
* 主要实现方法
*/
go:function(elem, style, val, callBack, time, px, callBack){
px = px || '';
/*
* 可能无法得到元素的真实值，
* 比如可能得到 auto 空值等，都会引发BUG(只是一些特殊的属性 才会返回这些值)
* 这里的零时解决办法是 默认为0
*/
var b = parseFloat( css(elem, style) ) || 0;
val = val - b;
var st = new Date().getTime();
var a = setInterval(function(){
var t = new Date().getTime() - st;
if( t > time){t = time;clearInterval(a);callBack&&callBack(elem);}
css(elem, style, parseFloat(tween.eain(t, b, val, time))+ px, 2);
}, 10);
return a;
},
/*
* 对外公开的 play() 开始动画
*/
play:function(){
var self = this, config = self.config;
if(config.delay){
setTimeout(function(){self.play()}, config.delay);
config.delay = 0;
return self;
}
var elem = config.ele;
var callBack = config.callBack;
var time = config.time;
var i = 0;
var j = 0;
var len = config.jsonMap.length;
var systemCallBack = function(){
if(++j == len){
callBack && callBack(elem);
};
}
for(; i<len; i++){
config.jsonMap[i].interval = self.go(elem, config.jsonMap[i].style, config.jsonMap[i].val, callBack, time, config.jsonMap[i].px, systemCallBack);
}
return self;
},
/*
* 停止动画
*/
stop:function(k){
var self = this, config = self.config;
var i = 0;
var len = config.jsonMap.length;
for(; i<len; i++){
if(config.jsonMap[i].interval){
clearTimeout(config.jsonMap[i].interval);
}
if(k == true){
config.ele.style[config.jsonMap[i].style] = config.jsonMap[i].val + config.jsonMap[i].px;
}
}
return self;
},
/*
* 延迟队列
*/
delay:function(time){
this.config.delay = time;
return this;
},
/*
* 级联调用，貌似现在还不太好用
*/
animate:function(jsonMap, time, callBack){
//this.delay(null);
return this.init(this.config.ele, jsonMap, time, callBack);
}
}
win[space] = Animate;
})("animate", window);
调用
var a = new animate('test', {"width":"200px"}, 300, function(aa){
animate(aa, {"height":"100px"}).delay(300).play();
}).delay(300).play();
var b = new animate('test1', {"width":"300px"}).delay(300).play();
var c = new animate('test2', {"width":"400px"}).delay(300).play();
