匀速动画的原理: 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
封装代码:
1 function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少
2 clearInterval(obj.timer);
3 obj.timer = setInterval(function() {
4 // 计算步长 动画的原理 盒子本身的位置 + 步长
5 var step = (target - obj.offsetLeft) / 10; // 步长
6 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长
7 // obj.style.left = 盒子本身的位置 + 步长
8 obj.style.left = obj.offsetLeft + step + "px";
9 if(obj.offsetLeft == target){
10 clearInterval(obj.timer);
11 }
12 },30)
13 }