javascript动画的简单封装

最近为了熟悉js动画效果，自己封装了一个简单的动画库
这里主要是使用了定时器来让动画，一步步的变换
这里值得注意的是，为了在结束的时候所有属性都能执行完成，我们在定时器中，一个属性执行完成之后我们从传过来的json中删除这个属性，一直到最后一个结束之后执行清除定时器以及执行回调函数

//这里是封装的动画--支持同时执行
function animate(obj, arrJson, callBack) {
    clearInterval(obj.timer);
    var current = 0;
   
    obj.timer = setInterval(function () {
        
        for (let attr in arrJson) {
            
            if (attr != null && getStyle(obj, attr) != null) {
                if (attr == 'opacity') {
                    current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
                } else {
                    current = parseInt(getStyle(obj, attr));
                }
                //这里让step随着当前位置来变换，来实现动画执行速度的变换
                var stepLen = (arrJson[attr] - current) / 10;
                stepLen = stepLen > 0 ? Math.ceil(stepLen) : Math.floor(stepLen);

                if (current == parseInt(arrJson[attr])) {
                    let arrCount = Object.keys(arrJson).length;
                    if (arrCount == 1) {
                        console.log('完成',arrCount,arrJson);
                        clearInterval(obj.timer);
                        if (callBack) {
                            callBack();
                        }
                        return;
                    }else{
                        delete arrJson[attr];
                        console.log(arrCount,arrJson);
                    }
                }
				//这里主要是有的需要单位有的不需要，这里进行区分一下
                if (attr == 'opacity') {
                    obj.style[attr] = (current + stepLen) / 100;
                } else {
                    obj.style[attr] = current + stepLen + 'px';
                }

            }else{
                continue;
            }
        }
    }, 30);

}

//此处是获取元素中属性的值--兼容写法
function getStyle(element, attr) {
    if (element.currentStyle) {
        return element.currentStyle[attr];
    } else {
        return getComputedStyle(element, false)[attr];
    }
}

使用方法：

 var btn = document.querySelector('.btn');
 var box = document.querySelector('.box');
 //注意这边的值会被处理成整数,opacity[0,100]
 var json = {'left':100,'top':200,'width':200,'height':101,'opacity':60};
 btn.addEventListener('click',function(){
       animate(box,json,function(){
            console.log('动画结束');
       });
 });