前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS中的运动函数

JS中的运动函数

作者头像
越陌度阡
发布2020-11-26 15:02:54
2.3K0
发布2020-11-26 15:02:54
举报

分享一个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);
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档