javascript中的运动框架

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33120763/article/details/78405705

运动框架

---

指定速度

/*
 *@param obj:运动对象
 *@param json:运动的目标值，以json格式表示，比如{"width": 300, "height": 300}
 *@param speed:运动速度
 *@param endFn:回调函数，可执行链式操作
 *@return undefined
 */
function move(obj,json,speed,endFn){

    clearInterval(obj.timer);
    var cur = 0;
    //存一下速度，因为后面需要来判断速度方向，不能在原值上更改，否则会引起混乱（值会在多个属性间混用）
    var sp = speed;

    obj.timer = setInterval(function(){

        //如果iBtn 为真，清除定时器
        var iBtn = true;
        var cur = 0;
        //遍历json中的属性
        for(var attr in json){

            //存值（目标值）
            var iTarget = json[attr];
            //获取当前属性值
            if( attr == "opacity"){
                //使用0-100的透明度值，因为小数的计算在计算机中是不精确的
                cur = Math.round(css( obj, 'opacity' ) * 100);
            }else{
                cur = parseInt( css( obj, attr) );
            }

            //区分速度方向
            speed = cur < iTarget ? sp : -sp;

            //检测
            //console.log(attr +":"+speed);

            //如果没有达到设置，继续运动
            if( cur != iTarget){

                cur = cur + speed;

                //如果运动超过设置，拉回来，否则正常进行
                if(cur > iTarget && speed > 0 || cur < iTarget && speed < 0) {
                    cur = iTarget;
                }else{
                    iBtn = false;
                }

                //运动一步
                if( attr == "opacity"){
                    obj.style.opacity = cur/100;
                    obj.style.filter = 'alpha(opacity='+ cur +')';
                }else{
                    obj.style[attr] = cur + "px";
                }
            }

        }


        if(iBtn){
            clearInterval(obj.timer);
            //方便链式运动
            endFn && endFn.call(obj);
        }

    }, 50);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj, false)[attr];
    }
}

---

减速缓冲运动

function bufferMove(obj,json,endFn){
    clearInterval(obj.timer);
    var cur = 0;
    obj.timer = setInterval(function(){
        var iBtn = true;
        var cur = 0;

        for(var attr in json){

            var iTarget = json[attr];
            if( attr == "opacity"){
                cur = Math.round(css( obj, 'opacity' ) * 100);
            }else{
                cur = parseInt( css( obj, attr) );
            }

            //这里是减速的方法，cur的值会越来越接近iTarget目标值，所以speed也会越来越小
            speed = ( iTarget - cur ) / 8;
            /*在js中取css样式的数值时, 当值到达小数点三位以后js会通过计算按照四舍五入来取值，
              比如设置宽度为: width:100.423534646, 在火狐中用obj.currentStyle[attr]或getComputedStyle(obj, false)[attr]来取得其值会得到300.417(作者也在思考，不过这已经可以证明js的小数取值很不精确),而在css样式中的值为100.423
              为了避免speed在与cur相加不能进位时css样式无任何变化，需要向上或向下取整（按照速度的方向，也就是正负值）
             */
            speed = speed > 0 ? Math.ceil(speed) :Math.floor(speed);


            if( cur != iTarget){

                cur = cur + speed;

                if(cur > iTarget && speed > 0 || cur < iTarget && speed < 0) {
                    cur = iTarget;
                }else{
                    iBtn = false;
                }

                if( attr == "opacity"){
                    obj.style.opacity = cur/100;
                    obj.style.filter = 'alpha(opacity='+ cur +')';
                }else{
                    obj.style[attr] = cur + "px";
                }
            }   
        }

        if(iBtn){
            clearInterval(obj.timer);
            endFn && endFn.call(obj);
        }

    }, 50);     
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj, false)[attr];
    }
}