DOM编程艺术（动画）

JS动画

1、实现方式：

-gif

-flash

-css3

-JS

2、三要素：

*对象

        DOM对象

*属性

*定时器

        setInterval、setTimeout、requestAnimationFrame

     ①setInterval

          var intervalID = setInterval(func,delay[,param1,param2,...])

         clearInterval(intervalID)

         -----func 参数：执行改变属性的操作

         -----delay参数：触发的时间间隔

     ②setTimeout

          var timeoutID = setTimeout(func,[delay,param1,param2,...])

          clearTimeout(timeoutID)

 setInterva与setTimeout的区别：

前一个是每隔一个时间间隔执行一次，后一个是只执行一次。

      ③requestAnimationFrame

          var requestID = requestAnimationFrame(func)

         cancelAnimationFrame(requestID)

与前两个定时器的区别：他的间隔时间是不由用户去控制的，而是由显示器的刷新时间控制的。

3、常见动画：

*形变

*位移

*旋转

*透明度

。。。

4、动画函数

		var animation = function(ele, attr, from, to){
			var distance = Math.abs(to - from);
			var stepLength = distance/100;
			var sign = (to - from)/distance;
			var offset = 0;
			var step = function(){
				var tmpOffset = offset + stepLength;
				if(tmpOffset < distance){
					ele.style[attr] = from + tmpOffset*sign + 'px';
					offset = tmpOffset;
				}else{
					ele.style[attr] = to + 'px';
					clearInterval(intervalID);
				}
			}
			ele.style[attr] = from + 'px';
			var intervalID = setInterval(step, 10);
		}

示例：图片轮播

描述：轮播图下面都有缩略图，缩略图下面有一个进度条（当进度条完成时，该缩略图就播放完毕），当点击缩略图时，就播放相应的大图。

*进度条：

		//使用setInterval
		var process = function(prcsswrap, drtn, intrvl, callback){
			var width = prcsswrap.clientWidth;
			//获取对象
			var prcss = prcsswrap.getElementsByClassName('prcss')[0];
			var count = drtn/intrvl;
			var offset = Math.floor(width/count);
			var tmpCurrent = CURRENT;
			//修改属性值
			var step = function(){
				if(tmpCurrent !== CURRENT){
					prcss.style.width = '0px';
					return;
				}
				var des = getNum(prcss.style.width) + offset;
				if(des < width){
					prcss.style.width = getNum(prcss.style.width) + offset + 'px';
				}else if(des == width){   //说明动画已经完成，就要清除掉一个动画
					clearInterval(intervalId);
					prcss.style.width = '0px';
					PREV = CURRENT;
					CURRENT = NEXT;
					NEXT ++;
					NEXT = NEXT%NUMBER;
					if(callback)
						callback();
				}else{
					prcss.style.width = width + 'px';
				}
			}
			//触发定时器
			var intervalId = setInterval(step, intrvl);
		};
		//使用setTimeout
		var process = function(prcsswrap, drtn, intrvl, callback){
			var width = prcsswrap.clientWidth;
			var prcss = prcsswrap.getElementsByClassName('prcss')[0];
			var count = drtn/intrvl;
			var offset = Math.floor(width/count);
			var tmpCurrent = CURRENT;
			var step = function(){
				if(tmpCurrent !== CURRENT){
					prcss.style.width = '0px';
					return;
				}
				var des = getNum(prcss.style.width) + offset;
				if(des < width){
					prcss.style.width = getNum(prcss.style.width) + offset + 'px';
					setTimeout(step, intrvl);
				} else if(des == width){
					prcss.style.width = '0px';
					PREV = CURRENT;
					CURRENT = NEXT;
					NEXT ++;
					NEXT = NEXT%NUMBER;
					if(callback)
						callback();
				}else{
					prcss.style.width = width + 'px';
				}
			}
			var timeoutId = setTimeout(step, intrvl);
		};
		//使用requestAnimationFrame
		var process = function(prcsswrap, drtn, intrvl, callback){
			var width = prcsswrap.clientWidth;
			var prcss = prcsswrap.getElementsByClassName('prcss')[0];
			var count = drtn/intrvl;
			var offset = Math.floor(width/count);
			var tmpCurrent = CURRENT;
			var step = function(){
				if(tmpCurrent !== CURRENT){
					prcss.style.width = '0px';
					return;
				}
				var des = getNum(prcss.style.width) + offset;
				if(des < width){
					prcss.style.width = getNum(prcss.style.width) + offset + 'px';
					requestAnimationFrame(step);
				}else if(des == width){
					prcss.style.width = '0px';
					PREV = CURRENT;
					CURRENT = NEXT;
					NEXT ++;
					NEXT = NEXT%NUMBER;
					if(callback)
						callback();
				}else{
					prcss.style.width = width + 'px';
				}
			}
			var requestId = requestAnimationFrame(step);
		};

*左右移动：

		//左右移动
		var animation = function(ele, from, to, callback){
			var distance = Math.abs(to - from);
			var cover = 0;
			var symbol = (to - from)/distance;
			var stepLength = Math.floor((distance*STEP)/SPEED);
			var step = function(){
				var des = cover + stepLength;
				if(des < distance){
					cover += stepLength;
					ele.style.left = getNum(ele.style.left) + stepLength*symbol + 'px';
				}else {
					clearInterval(intervalId);
					ele.style.left = to + 'px';
					if(callback)
						callback();
				}
			}
			var intervalId = setInterval(step, STEP);
		};