js--定時器的學習和對動畫的封裝（定時器）

1.定時器：在js里面，定時器主要有兩種，setInterval(function, time) 和 setTimeout（function,time)，

setInterval：每個time秒執行一次函數function

setTimeout：time秒后執行函數，僅且只執行一次

對於定時器的定義主要有三種

setInterval(function(){//第一種
    alert("定時器");
},20);


setInterval(fn,20);//第二種

setInterval("fn()",20);//第三種

function fn(){
    alert("定時器");
}

　

2.對勻速動畫的封裝：也就是對定時器的使用，來做動畫特效

（1）單向的運動

 function animate(obj, target){//obj:選中的屬性， target：目標坐標
        obj.timer = setInterval(function(){
            if(obj.offsetLeft > target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft +10 +"px";
        },30);
    }

（2）雙向運動，通過比較目標坐標與開始坐標的位置比較決定運動的方向

function animate(obj, target){
        var speech = target > obj.offsetLeft ? 5:-5;//判斷動畫移動的方向

        obj.timer = setInterval(function(){
            var result = target - obj.offsetLeft;//判斷相差的距離
            obj.style.left = obj.offsetLeft +speech +"px";
            if(Math.abs(result) <= 5) {//相差的距離小於5時，關閉定時器
                clearInterval(obj.timer);
                obj.style.left = target+"px";
            }

        },30);
    }

2、緩動動畫的封裝

（1）水平方向的緩動

function animate(obj, target){
        clearInterval(obj.timer);

        obj.timer = setInterval(function(){
            //盒子本身無的位置+步長
            var step = (target - obj.offsetLeft)/10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + "px";
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
        },30);
    }

（2）通過傳遞屬性值實現動畫

function animateSingle(obj, attr, target){//attr : 盒子的屬性
        clearInterval(obj.timer);

        obj.timer = setInterval(function(){
            //盒子本身無的位置+步長
            //獲取到當前樣式
            var current = parseInt(getStyle(obj, attr));//去掉px
            var step = (target - current)/10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //做動畫
            obj.style[attr] = current + step + "px";
            if(current == target){
                clearInterval(obj.timer);
            }
        },30);
    }

（3）多個屬性的動畫

   function animateMoer(obj, json, fn){//json:json格式的數據 {top:200, left:200,width:200} ,fn為回調函數
        clearInterval(obj.timer);

        obj.timer = setInterval(function(){
            var flag = true;
            //盒子本身無的位置+步長
            //獲取到當前樣式
            for(var attr in json){//attr:屬性 json[attr]值
                var current = 0;
                if(attr == "opacity"){
                    current =parseInt( getStyle(obj, attr)*100);
                }else{
                    current = parseInt(getStyle(obj, attr));//去掉px
                }

                var step = (json[attr] - current)/10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //做動畫
                if(attr== "opacity"){// 判斷是有opacity
                 if("opacity" in obj.style[attr]){//判斷是否支持
                     obj.style.opacity = (current + step)/100;
                 }else{//ie6支持
                     obj.style.filter = "alpha(opacity="+(current + step)+")";
                 }
                }else if(attr == "zIndex"){
                    obj.style.zIndex = json[attr];
                }
                else {
                    obj.style[attr] = current + step + "px";
                }
                if(current != json[attr]){//只要其中一個不滿足就不能停止定時器
                    flag = false;
                    if(fn){
                        fn();
                    }
                }
            }
            if(flag){
                clearInterval(obj.timer);
            }
        },30);
    }
    function fn(){alert("good");}

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

    }