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指的是回调函数。

function animate(obj,json,fn) {//加了个fn用来接收回调函数
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	//for  in遍历json
	var flag = true;//这是用来检测所有要改变的属性值是否都达到了目标值
	//获取当前的对象的属性的值
	var current = 0;
    for(var k in json) {
	// 因为opacity的值是小数，如果不这样处理，到后面算步长的时候是小数减去小数再除以10，
不太好算，所以这里current需要*100.
		if(k == "opacity") {
			current = parseInt(getstyle(obj,k)*100)||0;
		}else {
			current = parseInt(getstyle(obj,k));
		}
		//获取步长
		var step = (json[k] - current) / 10;
		step = step>0 ? Math.ceil(step) : Math.floor(step);

		//并不是所有属性的属性值都有px。做个判断
		if(k == "opacity")  // 判断用户有没有输入 opacity
        {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
             {
                   // obj.style.opacity
                      obj.style.opacity = (current + step) /100;
             }
              else
             {  // obj.style.filter = alpha(opacity = 30)
                   obj.style.filter = "alpha(opacity = "+(current + step)*10+")";
             }
         }
		else if (k == "zIndex") {
			obj.style[k] = json[k];
		}else {   // 如果不是更改透明度，则执行else里面的语句
					obj.style[k] = current + step+"px";
		}

			//如何清除定时器
			// if(current == target) {
			// 	clearInterval(obj.timer);
			// }这种方法不可行，因为要改变的是三个属性的值，
//现在left=200,width=800,top=200,这三个当中肯定是left值先到达目标值，
//到了之后就会清除定时器，而此时width和top还没有到达目标值，所以这种方法不可行。
			if(current != json[k]) {
				flag = false;//只要这三个属性值中有一个没有达到目标值就让flag=flase。
			}
		}
			// 遍历结束后也就有了结果，这时再决定是否清除定时器。
			if(flag) {
				clearInterval(obj.timer);
				if(fn) {   // 定时器结束后才会执行回调函数，这里判断是否有回调函数，如果有就执行
					fn();
				}
			}
		}, 30);
	}