运动框架move.js

不废话上代码

//获取非行间样式
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);

}