动画

帧：是动画里的最小单位，它是静态的图像
帧频：是一秒钟播放的帧的数量
一个完整的动画是如何实现的呢？
首先它是由很多帧组成的，人眼是有视觉暂留效果的，当一系列相似的图像用时间轴串联起来之后，如果它的时间间隔足够的小，那么人眼感知的就是一幅流畅的动画。（完全流畅30帧以上）（电影24帧）

实现方式

• gif
• flash
• CSS3
• JS

三要素

• 对象 DOM
• 属性 width height opacity Left...
• 定时器 setInterval setTimeout requestAnimationFrame

setInterval

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

• func 执行改变属性的操作
• delay 触发的时间间隔，以毫秒为单位
• 每隔指定时间都会执行一次

clearInterval(intervalID)

setTimeout

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

• delay 触发的时间间隔，默认值为0即立即触发,在指定的时间间隔后只执行一次

clearTimeout(timeoutID)

requestAnimationFrame

var requestID = requestAnimationFrame(func)
cancelAnimationFrame(requestID)

• 间隔时间是由显示器屏幕的刷新频率控制的（一秒刷新60次）

常用动画

• 形变 改变宽高
• 位移 改变相对位置
• 旋转
• 透明度
• ...

动画函数

var animation = function(ele,attr,from,to){
/*
ele 要进行动画的DOM对象
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.stylep[attr] = to + 'px';
            clearInterval(intervalID);
        }
    }
    ele.style[attr] = from +'px';
    var intervalID = setInterval(step,10);
}

图片轮播

进度条

• prcsswrap 对象的父元素
• drtn 进度条的一个时间
• intrvl 触发定时器的时间间隔
• callback 回调函数

左右移动