JS简单的动画函数的封装(基于步长)

1.匀速动画函数的封装 

obj指的是运动的对象，target指的是运动对象的目标值。

function animate(obj,target) {
				clearInterval(obj.timer);
				//先判断是往前走还是往回走
				var speed = target - obj.offsetLeft>0? 5: -5;
				obj.timer = setInterval(function(){
					var result = target - obj.offsetLeft;
//这是目标值200 与obj盒子左侧的offsetLeft值的差，并且这两者的差值不会超过5，因为每次都是offsetLeft的值+5或者-5.
					obj.style.left = obj.offsetLeft + speed +"px";
					if(Math.abs(result) <= 5) {
// 这里是result取绝对值，因为当target<=obj.offsetLeft时，result是个负值。
						clearInterval(obj.timer);
						obj.style.left = target +"px";
// 有可能会出现最后一步是198或者203的情况，所以最后都让这个盒子停在offsetLeft = 200的位置上。
					}
				}, 30);
			}

2.缓动动画函数的封装

obj指的是运动的对象，json指的是多个属性值，fn指的是回调函数。