帧：是动画里的最小单位，它是静态的图像
帧频：是一秒钟播放的帧的数量
一个完整的动画是如何实现的呢？
首先它是由很多帧组成的，人眼是有视觉暂留效果的，当一系列相似的图像用时间轴串联起来之后，如果它的时间间隔足够的小，那么人眼感知的就是一幅流畅的动画。（完全流畅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 回调函数
左右移动
