缓动动画封装

缓动动画的实现原理：盒子本身的位置＋步长

其中步长由小变大，是不断变化的，

步长公式　begin+=(end-begin)*缓动系数

使用开发的过程中可以不必考虑公式的具体由来；

封装缓动动画的过程需要考虑，透明度变化以及的＼滚动距离的变化，不断完善函数，封装的过程中，需要通过js访问css属性，以下是两种常用于访问css中属性的方法，两种方法都有自己的特点：

１.通过点语法获取css属性：

如：box.style.left  ,box.style.width......

使用点语法只能获取当行内的属性，无法获取大页面得属性，所以点语法存在一个致命的问题，跟在style后的属性不能由外面传入；

２．下标语法

利用[]访问属性，语法：　　　元素.style["属性"];

优点：可以动态传递参数作为属性

如：

let h="height";

box.style[h]=300+px;

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

//缓动动画
function buffer(obj,json,fn){
    let timer=null;
    //清除定时器
    clearInterval(obj.timer);
    //定义变量
    let begin=0,target=0,speed=0;
    //开启定时器
    obj.timer=setInterval(function(){
        //定义旗帜标识清除定时器的条件
        let flag=true;
        //遍历json
        for(let k in json){
            //求初始值
            if("opacity"===k){
                //透明度
                begin=Math.round(parseFloat(getStyle(obj,k))*100)||100;
                target=parseInt(json[k]*100);
            }else if("scrollTop"===k){
                //滚动
                begin=Math.ceil(obj.scrollTop);
                target=parseInt(json[k]);
            }else{
                begin=parseInt(getStyle(obj,k));
                target=parseInt(json[k]);
            }

            //求步长
            speed=(target-begin)*0.2;
            //判断是否取整
            speed=(target>begin)?Math.ceil(speed):Math.floor(speed);
            //让目标动起来
            if("opacity"===k){
                //透明度
                //w3c标准浏览器
                obj.style.opacity=(begin+speed)/100;
                //IE浏览器
                obj.style.filter='alpha(opacity:'+(begin+speed)+')';
            }else if("scrollTop"===k){
                //滚动距离
                obj.scrollTop=begin+speed;
            }else{
                //其他情况
                obj,style[k]=begin+speed+"px";
            }
            //判断
            if(begin!==target){
                flag=false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}