封装多属性的运动函数

在学习JS中，我们经常会遇到一些动画效果，那么这时候我们就用到了运动，这里我们来封装一个多属性的运动函数，以便我们之后需要的时候，拿来直接调用即可。

funcation(ele,attr_options,callback,timingfunction = "swing",speed){

    //这里的ele是运动的元素，attr_options是元素运动的目标和属性，callback是回调函数， 
    //timingfuncation是是否开启缓冲运动，speed是速度

    //首先获取一下这里面的属性操作
    for(var attr in attr_options){
       attr_options[attr] = {
        //获取目标点的值
        target = attr === "opacity"? attr_options[attr]*100 : attr_options[attr],
        //获取现在的值
        iNow = attr === "opacity"? parseInt( getComputedStyle(ele)[attr] * 100 ) : parseInt( getComputedStyle(ele)[attr])
    } 
  }
    

    clearInterval(ele.timer); //每次开启定时器前关闭定时器
    ele.timer = setInterval(function(){
        //1,获取速度
        for (var attr in attr_options){
            var item = attr_options[attr];
            var target = item.target;
            var iNow = item.iNow
            //判断是不是缓冲运动
            if(timingfunction === "swing"){
                speed = (target - iNow )/10;
                speed = speed > 0? Math.ceil(speed):Math.floor(speed);
            }else{
                speed = speed === "underfined"? 5 : speed;
                speed = iNow < target? Math.abs(speed):-Math.abs(speed);
            }
        }

        //终止条件：当目标点和现在点的距离小于速度时，终止
        if(Math.abs(target - iNow) <= Math.abs(speed)){
            ele.style[attr] = attr === "opacity"? target / 100 : target  + "px";
            //终止条件不可靠,因为目标的不一致会让运动次数执行不同，有可能提前关闭定时器
            //所以我们在完成一条属性的运动之后就删除这条数据
            delete attr_options[attr];

            //再看对象数组里面还有没有属性了，没了我们就关闭定时器
            for (var num in attr_options){
                return false;
            }
            clearInterval(ele.timer);
            //看是否有回调函数，如果有就执行，没有就返回空
            typeof callback === "function" ? callback() : "";
        }else{
            //元素运动
            iNow += speed ;
            ele.style[attr] = attr === "opacity" ? attr_options[attr].iNow /100:attr_options[attr].iNow + "px";
        }
        
        
    },30)
}

像这样，如果以后我们遇见常见的width 、height、left、top、opacity等这些常见的运动，我们就可以直接直接调用函数，传值进去，然后实现我们的效果了！！！