传统js动画实现一般使用setTimeout/setInterval等定时方式执行一个动画更新操作,但这种方式在使用中存在一些问题。
而requestAnimationFrame则可以解决这些问题:
代码使用上,requestAnimationFrame和setTimeout很相似。
function renderFrame() {
// do something
}
// setTimeout / setInterval
var handler = setTimeout(renderFrame, 100);
// requestAnimationFrame
var hanlder = requestAnimationFrame(renderFrame);
从上面可以看出,两者的差别在于是否指定interval的值。
目前,有些低版本浏览器不支持requestAnimationFrame,这种情况下为了进行兼容,还是需要使用setTimeout/setInterval来实现动画。另外,各厂商浏览器中requestFrameAnimation的名称也有差别,所以可以使用下面的最简单的方法,来进行兼容。
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
如果想更保险,可以参考Opera浏览器的技术师Erik Möller的封装
(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; 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 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());
在这里,代码判断了是使用4ms还是16ms的延迟,来最佳匹配60fps。同时还支持cancel方法。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/181811.html原文链接:https://javaforall.cn