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>