2018/2/10 数学函数与缓动动画原理匀速动画的原理

1.这三个函数都是  数学函数  

 Math  

 Math.ceil()   向上取整      天花板   

 比如说 console.log(Math.ceil(1.01))      结果 是 2 

         console.log(Math.ceil(1.9))        结果 2

         console.log(Math.ceil(-1.3))       结果是 -1  

 Math.floor()  向下取整      地板 

    比如说 console.log(Math.floor(1.01))      结果 是 1 

         console.log(Math.floor(1.9))           结果 1

         console.log(Math.floor(-1.3))       结果是 -2  

 Math.round()  四舍五入函数  

            console.log(Math.round(1.01))       结果是 1

           console.log(Math.round(1.9))       结果是 2

2.缓动动画原理匀速动画的原理：   盒子本身的位置  +  步长 

  缓动动画的原理:    盒子本身的位置  +  步长 (不断变化的)

  封装代码：

<script type="text/javascript">
    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.style.left = obj.offsetLeft +step + "px";

            if(obj.offsetLeft == target){

                clearInterval(obj.timer);

            }

        },30)

    }
</script>