传统的JS动画都是用 setTimeout 和 setInterval 实现的,后来无意中在网上看到一个新的JS函数 requestAnimationFrame 用它来替代传统的JS动画方法,说是效果更好,当时也没有仔细深究。直到昨天去魅族面试的时候,面试官问我有什么新的办法可以替代传统的JS动画,我说“我知道一个叫 requestAnimationFrame 的函数,它的执行效果更好”。但是让我仔细描述的时候,我就说不下去了,这也是我写这篇博客的初衷,我们学习的过程中一定要知其然比知其所以然,不要什么都略懂,最后落得跟半吊子一样。
定时器一直都是JS动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔还要足够长,才能确保浏览器有能力渲染产生的变化。
大多数电脑显示器的刷新频率是60HZ,也就是每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会提升。因此,最平滑动画的最佳循环间隔是 1000ms / 60 ,约为16.7ms。
传统的 setTimeout 和 setInterval 它们都不是很精确,因为它们实际上只是把动画代码添加到浏览器UI线程队尾以等待执行时间,如果它们前面有其它任务,则必须等前面的任务执行完在执行动画代码。
而 requestAnimationFrame 采用系统时间间隔,让各种动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。它有如下三个特点:
- 会把每一帧中所有的DOM操作集中起来,在一次动画操作就完成,并且动画的时间间隔紧紧跟随浏览器的刷新频率(不需要设置时间间隔)。
- 在隐藏或者不可见的元素中,不会进行动画操作。
- 当浏览器不是激活状态,不会进行动画操作。
下面是一个兼容所有浏览器的使用 requestAnimationFrame 的代码(IE9-无该方法)
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; x++) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}());
最后附上我利用 requestAnimationFrame 制作的一个 跳动的小球 的DEMO。