JS简单动画封装浅析

网上也有很多封装好的JS动画库，但大多因为功能过于完善，而至于代码量大动辄过千行，不宜在小项目中使用。这里自己封装了一个很轻量的动画库，主要功能都已实现。难免有疏漏之处，还请大家多多指教。

　　这里先说明一下功能和用法，以及注意点，随后是一个很简单的可运行示例。

用法及注意事项：
anim(elemId, cssObj, time, animType, funObj)
参数说明：
elemId （必选）需要施加动画效果的元素id
cssObj （必选）动画结束时的样式，对象类型，键值对形式，
其中键是能直接用在JS中的“驼峰”形式的css属性，而不是原来的css属性。
例如：{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time （必选）动画持续时间（单位ms）
animType （可选）默认为线性变化，代码里的Tween类型包含可选的其他参数
funObj （可选）如果要此选项，需要加入开始和结束时候执行的函数。
形如：{ el为elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}

几点注意事项：
1、没有做低版本浏览器兼容，支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“驼峰”形式的css属性（本来应把css转“驼峰”形式，
但是基本所有JS程序员都能直接写出驼峰形式，所以没转）
3、如果需要把动画应用到绝对定位（position:absolute;）元素上，
需要注意在这些元素上设置CSS的方法。
例如：设置top和marginTop，对于绝对定位元素，应该设置top而不是marginTop，
更不应该将二者混合使用，因为二者的参考点是不一样的，同时设置很容易造成混乱。
所以，这里也不支持同时设置二者。
其他相似的同理（left和marginLeft、right和marginRight）
同时设置top和bottom、left和right也不支持。
4、引用了Tween缓动算法，支持线性、渐入渐出等多种变化方式。
5、“动画队列”功能尚未实现，此版本为初级版本，疏漏之处还请多多指正。

#container{ border:1px solid #000; width:500px; height:400px;}
#aa{ border:1px solid #000; width:100px; height:40px; background-color:#0f0;
position:absolute; left:50px; top:50px; }
#bb{ border:1px solid #000; width:500px; height:40px; margin-top:100px;}
#cc{ border:1px solid #000; width:500px; height:40px;}

dfdfddfsd

gregreger

(function () {
var Tween = {
Linear: function (t, b, c, d) { return c * t / d + b; },
Quad: {
easeIn: function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) 255) return "ff";
else { var str = "0" + i.toString(16); return str.substring(str.length - 2); }
},
//获取颜色数据
GetColors: function (sColor) {
sColor = sColor.replace("#", "");
var r, g, b;
if (sColor.length > 3) {
r = color.sub(sColor, 0, 2); g = color.sub(sColor, 2, 2); b = color.sub(sColor, 4, 2);
} else {
r = color.sub(sColor, 0, 1); g = color.sub(sColor, 1, 1); b = color.sub(sColor, 2, 1);
r += r; g += g; b += b;
}
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
}
}
var fn = {
getElement: function (id) {
return typeof id == "string" ? document.getElementById(id) : id;
},
objType: function (obj) {
switch (Object.prototype.toString.call(obj)) {
case "[object Object]":
return "Object";
case "[object Number]":
return "Number";
case "[object Array]":
return "Array";
}
},
getStyle: function (elem, name) { //
var w3style;
if (document.defaultView) {
var style = document.defaultView.getComputedStyle(elem, null);
name == "borderWidth" ? name = "borderLeftWidth" : name; // 解决标准浏览器解析问题
w3style = name in style ? style[name] : style.getPropertyValue(name);
w3style == "auto" ? w3style = "0px" : w3style;
}
return elem.style[name] ||
(elem.currentStyle && (elem.currentStyle[name] == "auto" ? "0px" : elem.currentStyle[name])) || w3style;
},
getOriCss: function (elem, cssObj) { // 此处只能获取属性值为数值类型的style属性
var cssOri = [];
for (var prop in cssObj) {
if (!cssObj.hasOwnProperty(prop)) continue;
//if (prop != "opacity") cssOri.push(parseInt(fn.getStyle(elem, prop)));
//else cssOri.push(100 * fn.getStyle(elem, prop));
if (fn.getStyle(elem, prop) == "transparent" || /^#|rgb\(/.test(fn.getStyle(elem, prop))) {
if (fn.getStyle(elem, prop) == "transparent") {
cssOri.push([255, 255, 255]);
}
if (/^#/.test(fn.getStyle(elem, prop))) {
cssOri.push(color.GetColors(fn.getStyle(elem, prop)));
}
if (/^rgb\(/.test(fn.getStyle(elem, prop))) {
//cssOri.push([fn.getStyle(elem, prop).replace(/^rgb\(\)/g, "")]);
var regexp = /^rgb\(([0-9]{0,3}),\s([0-9]{0,3}),\s([0-9]{0,3})\)/g;
var re = fn.getStyle(elem, prop).replace(regexp, "$1 $2 $3").split(" ");
//cssOri.push(re); // re为字符串数组
cssOri.push([parseInt(re[0]), parseInt(re[1]), parseInt(re[2])]);
}
} else if (prop == "opacity") {
cssOri.push(100 * fn.getStyle(elem, prop));
} else {
cssOri.push(parseInt(fn.getStyle(elem, prop)));
}
}
return cssOri;
},
getEndCss: function (cssobj) {
var cssEnd = [];
for (var prop in cssobj) {
if (!cssobj.hasOwnProperty(prop)) continue;
//if (prop != "opacity") cssEnd.push(parseInt(cssobj[prop]));
//else cssEnd.push(100 * cssobj[prop]);
if (prop == "opacity") {
cssEnd.push(100 * cssobj[prop]);
} else if (/^#/.test(cssobj[prop])) {
cssEnd.push(color.GetColors(cssobj[prop]));
} else {
cssEnd.push(parseInt(cssobj[prop]));
}
}
return cssEnd;
}
}
function _anim(/*elemId, cssObj, time, animType, funObj*/) {
this.init.apply(this, arguments[0]);
}
_anim.prototype = {
init: function () {
this.elem = fn.getElement(arguments[0]);
this.cssObj = arguments[1];
this.cssOri = fn.getOriCss(this.elem, arguments[1]);
this.cssEnd = fn.getEndCss(arguments[1]);
this.durtime = arguments[2];
this.animType = "Tween.Linear";
this.funObj = null;
this.start = false;
this.complete = false;
this.onPause = false;
this.onRestart = false;
if (arguments.length

var bbtn = document.getElementById("Abegin"),
pbtn = document.getElementById("Apause");
var a;
bbtn.onclick = function () {
a = anim("aa", {
left: '200px',
top: '200px',
width: '200px',
height: '200px',
backgroundColor: '#f00',
borderWidth: '8px'
}, 4000, 'Tween.Bounce.easeInOut', {
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}
);
}
pbtn.onclick = function () {
a.pause();
}
anim("bb", {
marginTop:'160px',
opacity:0.1,
width: '200px',
height: '200px',
borderWidth: '8px'
}, 2000, 'Tween.Bounce.easeIn', {
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}
);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]