运动框架move.js

作者: lemontree2000 | 来源:发表于2016-11-03 01:08 被阅读0次

    不废话上代码

    //获取非行间样式
    function getStyle(obj,name) {
        return (obj.currentStyle || getComputedStyle(obj,false))[name]; 
    }
    // 运动MOVE开始
    function (obj,json,options) {
        // 1、整理options
        options = options || {};
        options.duration = options.duration || 500;
        options.easing = options.easing || 'ease-out';
        // 2、清理obj的定时器
        clearInterval(obj.timer);
        // 3、整理 start & dis & count
        var start = {};
        var dis = {};
        for (var name  in json) {
            start[name] = parseFloat(getStyle(obj,name));
            dis[name] = json[name] - start[name];
        }
        var count = Math.round(options.duration/30);
        var n = 0;
        
        // 4、做事开定时器
        obj.timer = setInterval(function(){
            // n++
            n++;
            for (var name in json) {
                //判断运动种类 
                switch (options.easing){
                    case 'linear' :
                        var a = n / count;
                        var cur = start[name] + dis[name]*a;
                        break;
                    case 'ease-in':
                        var a = n / count;
                        var cur = start[name] + dis[name]*(a*a*a);
                        break;
                    case 'ease-out':
                        var a = 1 - n / count;
                        var cur = start[name] + dis[name]*(1-a*a*a);
                        break;
                    
                }
                //判断name是否是opacity,是直接赋cur
                if (name == 'opacity') {
                    obj.style.opacity = cur;
                    obj.style.fliter = 'alpha(opacity:'+cur*100+')';
                } else {
                    obj.style[name] = cur + 'px';   
                }
            }
            
            //判断什么是定时器停止并回调函数
            if (n == count) {
                clearInterval(obj.timer);
                options.complete && options.complete();
            }
        },30);
    
    }
    
    
    
    
    
    
    
    
    
    

    相关文章

      网友评论

        本文标题:运动框架move.js

        本文链接:https://www.haomeiwen.com/subject/clsbuttx.html