js多物体多方向缓动动画加带有回调机制

一、获取一组div元素

var boxs = document.getElementsByTagName('div');

二、封装获取属性值的函数

    function getStyle(dom, attr) {
        if (window.getComputedStyle) {
            // 兼容chrome、firefox、ie9以上支持
            return window.getComputedStyle(dom,null)[attr];
        } else {
           //兼容ie9一下
            return dom.currentStyle(attr);
        }
    }    

三、封装多物体多方向加带有回调机制的函数

.

   function move(dom, attrObj,callback) {
        clearInterval(dom.timer);
        console.log(attrObj);
        var speed = null, cur = null;
        dom.timer = setInterval(function () {
            //加入锁的机制，来实现物体多属性运动完成后的回调
            var lock = true;
            for (var attr in attrObj) {
                //如果改变的是opacity，需要先扩大100倍，效果更明显
                if (attr == 'opacity') {
                    cur = parseFloat(getStyle(dom, attr)) * 100;
                } else {
                    cur = parseInt(getStyle(dom, attr));
                }
                speed = (attrObj[attr] - cur) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                console.log(speed);
                if (attr == 'opacity') {
                    dom.style.opacity = (speed + cur) / 100;
                } else {
                    dom.style[attr] = speed + cur +  'px';
                }
                //判断多属性运动都到达目标点没有，如果有任何一个属性没有到达目标点，锁改变为false
                if ( cur !== attrObj[attr]) {
                    lock = false;
                }
            }
            //所有属性都到达目标点以后，才会执行以下代码
            if (lock) {
                clearInterval(dom.timer);
                // 传入的callback是函数的话才执行
                typeof callback == 'function' && callback();
            }
        }, 30)
    }        

四、点击元素执行动画

    boxs[0].onclick = function () {
        move(this, { width: 400, height: 400, borderWidth: 20,opacity: 50},function(){
            move(boxs[1],{width: 100, height: 100, borderWidth: 5, opacity: 100});
        });
    }