Javascript漂流记（下）__js运动篇

一、匀速运动

        function startMove(dom, destination){
            clearInterval(timer);
            var iSpeed = destination - dom.offsetLeft > 0 ? 5 : -5;
            timer = setInterval(function(){
                if( Math.abs(destination - dom.offsetLeft) < Math.abs(iSpeed) ){
                    dom.style.left = '500px';
                    clearInterval(timer);
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            },30);
        }

二、匀加速运动

        function startMove(dom){
            clearInterval(timer);
            var a = 2;
            var iSpeed = 10;
            timer = setInterval(function(){
                iSpeed = iSpeed + a;
                dom.style.left = dom.offsetLeft + iSpeed + 'px';
            },30)
        }

三、缓冲运动

        function startMove(dom, destination){
            clearInterval(timer);
            timer = setInterval(function(){
                var iSpeed = (destination - dom.offsetLeft) / 11;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(dom.offsetLeft == destination){
                    clearInterval(timer);   
                }else{    
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';
                }
            },30)
        }

四、弹性运动（加速度变化的运动）

        function startMove(dom, target){
            clearInterval(timer);
            var a;
            var iSpeed = 0;
            var u = 0.8;
            timer = setInterval(function(){
                a = (target - dom.offsetLeft) / 10;
                iSpeed += a;
                iSpeed *= u;
                if(Math.abs(iSpeed < 1) && Math.abs(target - dom.offsetLeft) < 1){
                    clearInterval(timer);
                    dom.style.left = target + 'px';
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed + 'px';   
                }
            },30);
        }

五、模拟重力场

        function startMove(dom){
            clearInterval(dom.timer);
            var iSpeedX = 6,
                iSpeedY = 6,
                g = 2;
            dom.timer = setInterval(function(){
                iSpeedY += g;
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                    iSpeedY *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.9;
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.9;
                    newTop = 0;
                }
                if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                    iSpeedX *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.9;
                    newLeft = document.documentElement.clientWidth - dom.clientWidth;
                }
                if(newLeft <= 0){
                    iSpeedX *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.9;
                    newLeft = 0;
                }
                if(Math.abs(iSpeedX) < 1){iSpeedX = 0;}
                if(Math.abs(iSpeedY) < 1){iSpeedY = 0;}
                if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
                    clearInterval(dom.timer);
                    alert('gameover');
                }else{
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }  
            },30)
        }

六、多物体运动

        function getStyle(dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom, null)[attr];
            }else{
                return dom.currentStyle[attr];
            }
        }
        function startMove(dom, destination){
            clearInterval(dom.timer);
            var iSpeed = null, iCur = null;
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom, 'width'));
                iSpeed = (destination - iCur) / 11;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == destination){
                    clearInterval(dom.timer);   
                }else{    
                    dom.style.width = iCur + iSpeed + 'px';
                }
            },30)
        }

七、多物体不同值运动

       function getStyle(dom, attr){
           if(window.getComputedStyle){
               return window.getComputedStyle(dom, null)[attr];
           }else{
               return dom.currentStyle[attr];
           }
       } 
       function startMove(dom, attr, destination){
            clearInterval(dom.timer);
            var iSpeed = null, iCur = null;
            dom.timer = setInterval(function(){
                if(attr == 'opacity'){
                    iCur = parseFloat(getStyle(dom, attr)) * 100;               
                }else{
                    iCur = parseInt(getStyle(dom, attr)); 
                }
                iSpeed = (destination - iCur) / 10;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == destination){
                    clearInterval(dom.timer);
                }
                if(attr == 'opacity'){
                    dom.style.opacity = (iCur + iSpeed) / 100;
                }else{
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
            },30)
        }

八、多物体多值运动带回调机制

        function getStyle(dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom, null)[attr];
            }else{
                return dom.currentStyle[attr];
            }
        }
        function startMove(dom, attrObj, callback){
            clearInterval(dom.timer);
            var iSpeed = null, iCur = null;
            dom.timer = setInterval(function(){
                var bStop = true;
                for(var attr in attrObj){
                    if(attr == 'opacity'){
                        iCur = parseFloat(getStyle(dom, attr)) * 100;               
                    }else{
                        iCur = parseInt(getStyle(dom, attr)); 
                    }
                    iSpeed = (attrObj[attr] - iCur) / 10;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if(attr == 'opacity'){
                        dom.style.opacity = (iCur + iSpeed) / 100;
                    }else{
                        dom.style[attr] = iCur + iSpeed + 'px';
                    }
                    if(iCur != attrObj[attr]){
                        bStop = false;
                    }
                }
                if(bStop){
                    clearInterval(dom.timer);
                    typeof callback == 'function' && callback();
                }
            },30);
        }

以上内容属二哥原创，整理自 "渡一教育Javascript课程" ，一个值得推荐的"渡一教育"。