学习笔记:requestAnimationFrame()
requestAnimationFrame() 是浏览器提供的一个统一帧管理、提供监听帧的API。这个方法原理跟setTimeout/setInterval差不多,setTimeout/setInterval都是要指定好间隔时间,而requestAnimationFrame 在运行时,浏览器会自动检测性能,实现最优的动画帧频率。
简单的浏览器兼容
window.requestAnim<span style="line-height: 25.6px; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;">ation</span>Frame = (function() {
return window.requestAnimationFrame ||
<span style="white-space:pre"> </span> window.webkitRequestAnimationFrame ||
<span style="white-space:pre"> </span> window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
<span style="white-space:pre"> </span> window.msRequestAnimationFrame ||
function(callback) {
<span style="white-space:pre"> </span> return window.setTimeout(callback, 30);
};
})();
function loop(){
requestAnimationFrame(loop);
/* .... */
}
可以通过 window.cancelAnimationFrame() 来取消动画。
var raf = requestAnimationFrame(callback); cancelAnimationFrame(raf );