js--定时器的学习和对动画的封装（定时器）

Posted 2020-10-07 _江江江江

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];
        }

    }