JS原生动画函数封装

function getStyle(obj, attr) {     //获取对象的属性，并进行了兼容处理
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}

//动画函数，obj为对象，json为包含改变属性为指定值的对象集合，speed为速度值，不用加单位，boolean是布尔值，true为匀速，false为变速，func为动画执行完成后的回
调函数
function animate(obj, json, speed, boolean, func) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//flag标记，动画执行完成后再执行回调函数
var flag = true;
for (var k in json) {
var leader,target,step;
if (k === "zIndex") {  //改变层级
obj.style[k] = json[k];
}
else if (k === "opacity") {  //改变透明度
leader = getStyle(obj, k) * 100;
target = json[k] *100;
if (boolean) {  //匀速
step = Math.abs(speed);
step = target > leader ? step : -step;
} else {  //变速
step = (target - leader) / 10;
step = target > leader ? Math.ceil(step) : Math.floor(step);
}
leader += step;
if (boolean) {  //匀速
if (Math.abs(target - leader) > Math.abs(step)) {
obj.style[k] = leader / 100 ;
}
else {  //变速
obj.style[k] = target / 100;
}
}
else {
obj.style[k] = leader / 100;
}
}
else {  //改变其他属性
leader = parseInt(getStyle(obj, k)) || 0;
target = json[k];
if (boolean) {  //匀速
step = Math.abs(speed);
step = target > leader ? step : -step;
} else {  //变速
step = (target - leader) / 10;
step = target > leader ? Math.ceil(step) : Math.floor(step);
}
leader += step;
if (boolean) {  //匀速
if (Math.abs(target - leader) > Math.abs(step)) {
obj.style[k] = leader + "px";
}
else {
obj.style[k] = target + "px";
}
}
else {  //变速
obj.style[k] = leader + "px";
}

if (leader !== target) {
flag = false;
}
}
}
if (flag) {
clearInterval(obj.timer);
if (func) {
func();
}
}
},15)
}