继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习资料】分享一个运动小框架

ruibin
关注TA
已关注
手记 77
粉丝 9109
获赞 2572
/**
 * Created by EX-MAORUIBIN on 2016-01-15.
 * version: 1.0,
 * function:Custom implementation animation。
 */
define((function (window) {
    var moveStart = function () {
        var icur = 0,
            speed = 0,
            target = 0,
            obj = arguments[0] || {},
            attr = arguments[1] || undefined,
            fn = undefined;
        clearInterval(obj.timer);
        if (typeof attr === 'object') {
            if (arguments[2]) {
                if (typeof arguments[2] === 'string') {
                    var rapid = arguments[2];
                    switch (rapid) {
                        case 'normal' :
                            rapid = 30;
                            break;
                        case 'fast' :
                            rapid = 10;
                            break;
                        case 'faster':
                            rapid = 8;
                            break;
                        case  'slow' :
                            rapid = 50;
                            break;
                        case 'slower':
                            rapid = 80;
                            break;
                        default :
                            rapid = 30;
                    }
                } else if (typeof arguments[2] === 'function') {
                    fn = arguments[2];
                } else {
                    console.log('参数错误');
                }
            }
            rapid = rapid || 30;
            if (arguments[3]) {
                fn = arguments[3];
            }
            obj.timer = setInterval(function () {
                for (var prop in attr) {
                    target = parseFloat(attr[prop]);
                    if (prop === 'opacity') {
                        icur = Number((parseFloat(getStyle(obj, prop))).toFixed(2));
                    } else {
                        icur = parseInt(getStyle(obj, prop));
                    }
                    if (target != icur) {
                        flag = false;
                    }
                    if (prop === 'opacity') {
                        speed = (target - icur) * 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        speed /= 100;
                        obj.style.filter = 'alpha(opacity:' + (icur + speed)*100 + ')';
                        obj.style.opacity = (icur + speed);
                    } else {
                        speed = (target - icur) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        obj.style[prop] = icur + speed + 'px';
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                }
            }, rapid)
        } else {
            var iTarget = arguments[2] || undefined;
            if (arguments[3]) {
                if (typeof arguments[3] === 'string') {
                    var rapid = arguments[3];
                    switch (rapid) {
                        case 'normal' :
                            rapid = 30;
                            break;
                        case 'fast' :
                            rapid = 10;
                            break;
                        case 'faster':
                            rapid = 8;
                            break;
                        case  'slow' :
                            rapid = 50;
                            break;
                        case 'slower':
                            rapid = 80;
                            break;
                        default :
                            rapid = 30;
                    }
                } else if (typeof arguments[3] === 'function') {
                    fn = arguments[3];
                } else {
                    console.log('参数错误');
                }
            }
            rapid = rapid || 30;
            if (arguments[4]) {
                fn = arguments[4];
            }
            obj.timer = setInterval(function () {
                if (attr === 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr) * 100));
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }

                speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iTarget == icur) {
                    //TODO:Remember:Must first clean up and then call it.Otherwise,Cleaning up in the first place the callback will also be cleared up.
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }

                } else {
                    if (attr === 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }, rapid);
        }
    }

    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return getComputedStyle(obj)[attr];
        } else {
            return obj.currenStyle(attr);
        }
    }

    window.moveStart = moveStart;
    //define( "perfect3", [], function () { return moveStart; } );
})(window));

这个小框架并不好,其实应该使用门面的,只是那个时候没有想那么多,写完了发现没啥用,也就没有改。不足之处大家见谅!

打开App,阅读手记
7人推荐
发表评论
随时随地看视频慕课网APP

热门评论

就是一个运动小函数库

这个是干嘛的?

有人问我要,我就发布下。就是一个简单的动画框架,里面的东西都可以修改,没有版权~。

查看全部评论