JavaScriptパッケージの任意の方向、任意の属性、多属性同時運動の運動関数

15321 ワード

/*
    :animate(    ,    ,    )
         ,      :
animate(box,{
        width:200,
        height:200,
        opacity:0.5,
        left:200
    },function(){console.log('        ');});*/
function animate(dom,attr_obj,callback){
    for(var attr in attr_obj){
        //        
        //           
        // attr_obj = {
        //     width:{
        //         'current':200,
        //         'target':200
        //     },
        //     height:{
        //         'current':200,
        //         'target':200
        //     },
        //     opacity:{
        //         'current':1,
        //         'target':0.5
        //     }
        // }
        if(attr === 'opacity'){
           var current = parseInt(getComputedStyle(dom,false)[attr]*100);
           var target = attr_obj[attr]*100;
        }else if(attr.indexOf('scroll') !== -1){
           var current = dom[attr];
           var target = attr_obj[attr];
        }else{
            var current = parseInt(getComputedStyle(dom,false)[attr]);
            var target = attr_obj[attr];
        }
        attr_obj[attr] = {
            
            'current':current,
            'target':target
        }
    }
    //     ,             
    clearInterval(dom.timer);

    dom.timer = setInterval(function(){
        for(var attr in attr_obj){
            //  current target,        
            var current = attr_obj[attr].current;
            var target = attr_obj[attr].target;
            //    
            var speed = (target - current)/10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //                
            if(Math.abs(target - current) <= Math.abs(speed)){
                if(attr === 'opacity'){
                    dom.style[attr] = target /100;
                }else if(attr.indexOf('scroll') != -1 ){
                    dom[attr] = target;
                }else{
                    dom.style[attr] = target + 'px';
                }
                //                  
                delete attr_obj[attr];
                //            ,              ,          ,
                //            ,           。       ,     
                //     ,     
                for(var o in attr_obj){
                    return;
                }
                //
                clearInterval(dom.timer);

                //           ,       ,            
                typeof callback === 'function' ? callback() : '';
                
            }else{
                attr_obj[attr].current += speed;
                if(attr === 'opacity'){
                    dom.style[attr] = attr_obj[attr].current/100;
                }else if(attr.indexOf('scroll') != -1){
                    dom[attr] = attr_obj[attr].current;
                }else{
                    dom.style[attr] = attr_obj[attr].current + 'px'
                }
                
            }
        }
    },20)
}
好きなのは注目してください.