js运动基础之匀速运动

单个属性匀速运动

    /**
     * 单属性匀速运动
     */
    function fnSingleUniformMove(oDom, sAttr, iTarget, fn){
        var iSpeed, iCur;
        clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加
        oDom.timer = setInterval(function(){

            // 计算当前值
            if(sAttr == 'opacity'){
                iCur = Math.round(fnGetStyle(oDom, sAttr) * 100);
            }else{
                iCur = parseInt(fnGetStyle(oDom, sAttr));
            }

            // 设置速度
            if(iTarget < iCur){
                iSpeed = -10;
            }else{
                iSpeed = 10;
            }

            // 当目标点和当前值差值小于速度时速度等于差值
            if(Math.abs(iTarget - iCur) < Math.abs(iSpeed)){
                iSpeed = iTarget - iCur;
            }

            // 运动停止判断
            if(iTarget == iCur){
                clearInterval(oDom.timer);
                fn&&fn();
            }else{
                if(sAttr == 'opacity'){
                    oDom.style.opacity = ( iCur + iSpeed ) / 100;
                    oDom.style.filter = 'alpha(opacity: ' + (iCur + iSpeed) + ')';
                }else{
                    oDom.style[sAttr] = iCur + iSpeed + 'px';
                }
            }
        }, 30);
    };

多属性同时改变的匀速运动

    /**
     * 多属性匀速运动
     */
    function fnMultiUniformMove(oDom, json, fn){
        var iSpeed, iCur, bStop;
        clearInterval(oDom.timer); // 开启定时器前先清除定时器，避免动画重复叠加
        oDom.timer = setInterval(function(){
            bStop = true; // 进行for in 循环前为true，如果有一个没达到目标点下面就会让他变为false，最后判断该值是否为true来决定是否关闭定时器
            for(var sAttr in json){
                // 计算当前值
                if(sAttr == 'opacity'){
                    iCur = Math.round(fnGetStyle(oDom, sAttr) * 100);
                }else{
                    iCur = parseInt(fnGetStyle(oDom, sAttr));
                }

                // 设置速度
                if(json[sAttr] < iCur){
                    iSpeed = -10;
                }else{
                    iSpeed = 10;
                }

                // 当目标点和当前值差值小于速度时速度等于差值
                if(Math.abs(json[sAttr] - iCur) < Math.abs(iSpeed)){
                    iSpeed = json[sAttr] - iCur;
                }

                // 单属性运动停止判断
                if(json[sAttr] != iCur){
                    bStop = false;
                    if(sAttr == 'opacity'){
                        oDom.style.opacity = ( iCur + iSpeed ) / 100;
                        oDom.style.filter = 'alpha(opacity: ' + (iCur + iSpeed) + ')';
                    }else{
                        oDom.style[sAttr] = iCur + iSpeed + 'px';
                    }
                }
            }

            // 整体运动停止的判断
            if(bStop){
                clearInterval(oDom.timer);
                fn&&fn();
            }
        }, 30);
    };

获取元素样式的方法

    // 获取元素的某个样式的值
    function fnGetStyle(oDom, sAttr){
        if(getComputedStyle){
            return getComputedStyle(oDom, null)[sAttr]; // getComputedStyle获取自定义值时返回undefined
        }else{
            return oDom.currentStyle[sAttr]; // currentStyle和getAttribute一样可以读取自定义的值（这样opacity的值才能被获取）
        };
    };