10.3缓动 多值动画的封装

缓动 多值动画的封装 当然这里还不包括透明度等等其他 属性的封装
/**

• Created by xmg on 2017/6/1.
  */

//{'width':800,'height':900,'left':100,'top':200}
function buffer(obj, json, fn) {//对象,字典名,回调的函数
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//定义一个旗帜(统一旗号)
var isStop = true;
//遍历
for (var key in json) {
var begin = parseInt(getCSSAttr(obj, key));
var target = parseInt(json[key]);

        var speed = (target - begin) / 20;
        speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
        obj.style[key] = begin + speed + 'px';

        //判断
        if (begin != target) {
            isStop = false;
        }
    }
    if (isStop) {
        clearInterval(obj.timer);
        //保证外部是否传入了回调,如果没有传入,有可能报错
        if (fn) {
            //执行回调
            fn();
        }

    }
}, 20);

}
//封装一个获取css样式的函数
function getCSSAttr(obj, attr) {//参1对象 , 参2 伪数如 (width,height ----) 可以不写
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
//火狐和谷歌以及ie高版本
else {
return getComputedStyle(obj, null)[attr];
}
}