缓动函数requestAnimationFrame

传统的动画函数：

function animate(element, name, from, to, time) { 
time = time || 800; //默认0.8秒 
var style = element.style, 
latency = 60, // 每60ms一次变化 
count = time / latency, //变化的次数 
step = Math.round((to - from) / count), //每一步的变化量 
now = from; 
function go() { 
count--; 
now = count ? now + step : to; 
style[name] = now + 'px'; 
if (count) { 
setTimeout(go, latency); 
} 
} 
style[name] = from + 'px'; 
setTimeout(go, latency); 
} 

其基本逻辑由以下部分组成： 
获取起点值from和终点值to，通过动画需要进行的时间time，以及每侦间隔latency的要求，计算出值的改变次数count和每次改变的量step。 
开启setTimeout(fn, latency);来步进到下一侦。 在下一侦中，设置属性步进一次，如果动画还没结束，再回到第2步继续下一侦。 

缺点：

同时打开100个动画效果，根据上面的函数，很明显会有100个定时器在同时运行，这些定时器之间的调度会对性能有轻微的影响。虽然在正常的环境中，这些许的影响并不会有什么关系，但是在动画这种对流畅度有很高要求的环境下，任何细微的影响都可能产生出不好的用户体验。 

于是，浏览器开始推出一个API，叫做requestAnimationFrame。调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback。 不传递参数地直接调用该函数，启动动画帧，下一个帧触发时，会同时触发window.onmozbeforepaint事件，可以通过注册该事件来进行动画。 

此时，我们的动画逻辑可以变成这样： 
记录当前时间startTime，作为动画开始的时间。 
请求下一帧，带上回调函数。 
下一帧触发时，回调函数的第一个参数为当前的时间，再与startTime进行比较，确定时间间隔ellapseTime。 
判断ellapseTime是否已经超过事先设定的动画时间time，如果超过，则结束动画。 
计算动画属性变化的差值differ = to - from，再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。 
计算出现在应该变化到的位置Math.round(from + step)，并重新对样式赋值。 
继续请求下一帧。 

新的动画函数： 

function animate(element, name, from, to, time) { 
time = time || 800; // 默认0.8秒 
var style = element.style, 
startTime = new Date; 
function go(timestamp) { 
var progress = timestamp - startTime; 
if (progress >= duration) { 
style[name] = to + 'px'; 
return; 
} 
var now = (to - from) * (progress / duration); 
style[name] = now.toFixed() + 'px'; 
requestAnimationFrame(go); 
} 
style[name] = from + 'px'; 
requestAnimationFrame(go); 
} 

但是并不是每个浏览器都支持requestAnimationFrame函数的，所以再做一个简单的修正。 

requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.webkitRequestAnimationFrame || 
window.msRequestAnimationFrame || 
window.oRequestAnimationFrame || 
function(callback) { setTimeout(callback, 1000 / 60); };