js运动框架

参照网上写了一个运动框架

支持对象的width,height,left,top...，透明度动画效果

  // 对一个对象的多个属性实现动画
  function animate(obj,json,fun){
    clearInterval(obj.timer);

    var fre = json['frequence'] || 10;  //给对象添加添加一个频率 ,默认10
    delete json['frequence'];  //用完即删，因为其并不是需要加动画的属性
    obj.timer = setInterval(function(){
        // 遍历json格式对象
        var flag = true; //用来判断是否停止定时器
        for(var attr in json){
            // 判断属性是否是透明度，取值范围不同
            var curStyle = 0;
           if(attr == "opacity"){
                curStyle = parseInt(getStyle(obj,attr))*100;    
           }else{
                curStyle = parseInt(getStyle(obj,attr));    //必须用parseInt(),否则有bug抖动
           }
            var tarStyle = parseInt(json[attr]);

            var step = (tarStyle - curStyle) / fre; //步长/速度
            step = step > 0 ? Math.ceil(step) : Math.floor(step);   //step最终都会等于0

            // 判断属性是否是透明度
            if(attr == "opacity"){
                obj.style[attr] = (curStyle + step)/100;
                obj.style.filter = "alpha(opacity = "+ (curStyle + step) +")";
            }else if(attr == "zIndex"){
                obj.style.zIndex = tarStyle;
            }else{
                
                obj.style[attr] = curStyle + step + "px";
            }
           
            // 如果有一个动画没有执行完，就不能停止定时器
            if(curStyle != json[attr]){
                flag = false;
            }
        }

        if(flag){
            clearInterval(obj.timer);
            if(fun){
                fun();  //执行回调函数
            }
            
        }

    },16);
}

// 获取元素样式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];  //ie8及以下
    }else{
        return window.getComputedStyle(obj,null)[attr]; //非ie8及以下
    }
}

 

支持的参数，

obj:对象

json:json格式的对象，用于传递多个要设置动画的属性

fun:动画执行完，要执行的回调函数，可不写