JS中的运动函数

分享一个JS封装的运动函数，里面分为弹性运动和缓冲运动两个方法，通过调用startMove()函数来实现动画效果。

代码语言：javascript复制

function css(obj, attr, value) {
    if (arguments.length == 2) {
        return parseFloat(
            obj.currentStyle ?
                obj.currentStyle[attr] :
                document.defaultView.getComputedStyle(obj, false)[attr]
        );
    } else if (arguments.length == 3) {
        switch (attr) {
            case 'width':
            case 'height':
            case 'paddingLeft':
            case 'paddingTop':
            case 'paddingRight':
            case 'paddingBottom':
                value = Math.max(value, 0);
            case 'left':
            case 'top':
            case 'marginLeft':
            case 'marginTop':
            case 'marginRight':
            case 'marginBottom':
                obj.style[attr] = value   'px';
                break;
            case 'opacity':
                obj.style.filter = "alpha(opacity:"   value * 100   ")";
                obj.style.opacity = value;
                break;
            default:
                obj.style[attr] = value;
        }

        return function (attr_in, value_in) {
            css(obj, attr_in, value_in)
        };
    }
}

var MOVE_TYPE = {
    BUFFER: 1,
    FLEX: 2
};

// 调用运动的函数,根据不同类型调用不同的方法
function startMove(obj, oTarget, iType, fnCallBack, fnDuring) {
    var fnMove = null;
    if (obj.timer) {
        clearInterval(obj.timer);
    };

    switch (iType) {
        case MOVE_TYPE.BUFFER:
            fnMove = doMoveBuffer;
            break;
        case MOVE_TYPE.FLEX:
            fnMove = doMoveFlex;
            break;
    };

    obj.timer = setInterval(function () {
        fnMove(obj, oTarget, fnCallBack, fnDuring);
    }, 15);
}

// 缓冲运动方法
function doMoveBuffer(obj, oTarget, fnCallBack, fnDuring) {

    var bStop = true;
    var attr = '';
    var speed = 0;
    var cur = 0;

    for (attr in oTarget) {
        cur = css(obj, attr);
        if (oTarget[attr] != cur) {
            bStop = false;

            speed = (oTarget[attr] - cur) / 5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            css(obj, attr, cur   speed);
        }
    }

    if (fnDuring) fnDuring.call(obj);

    if (bStop) {
        clearInterval(obj.timer);
        obj.timer = null;

        if (fnCallBack) fnCallBack.call(obj);
    }
}

// 弹性运动方法
function doMoveFlex(obj, oTarget, fnCallBack, fnDuring) {

    var bStop = true;
    var attr = '';
    var speed = 0;
    var cur = 0;

    for (attr in oTarget) {
        if (!obj.oSpeed) obj.oSpeed = {};
        if (!obj.oSpeed[attr]) obj.oSpeed[attr] = 0;
        cur = css(obj, attr);
        if (Math.abs(oTarget[attr] - cur) > 1 || Math.abs(obj.oSpeed[attr]) > 1) {
            bStop = false;

            obj.oSpeed[attr]  = (oTarget[attr] - cur) / 5;
            obj.oSpeed[attr] *= 0.7;
            var maxSpeed = 65;
            if (Math.abs(obj.oSpeed[attr]) > maxSpeed) {
                obj.oSpeed[attr] = obj.oSpeed[attr] > 0 ? maxSpeed : -maxSpeed;
            }

            css(obj, attr, cur   obj.oSpeed[attr]);
        }
    }

    if (fnDuring) fnDuring.call(obj);

    if (bStop) {
        clearInterval(obj.timer);
        obj.timer = null;
        if (fnCallBack) fnCallBack.call(obj);
    }
}

动画 函数

0 人点赞