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

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

步长公式　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);}