哈喽，来说说你们最感兴趣的H5新功能-requestAnimationFrame定时器那点事儿！这货牛逼了，它能让你玩游戏和看动画时更加畅快淋漓。过去咱们要用setTimeout和setInterval来搞定动画，可是它们有时候会拖累速度导致画面变卡。所以HTML5赶紧推出了requestAnimationFrame来改变这种状况。接下来，咱们就来好好研究下这个神奇的利器！
你知道”requestAnimationFrame”是啥玩意不？这东西到底怎么回事？
requestAnimationFrame是个神队友计时器，它能帮忙管理我们的动画，使它与显示器刷新频率保持一致。因为无论你是用常见的60Hz屏幕还是高大上的144Hz高刷新率，也能保证动画流畅得像水面上轻轻拂过的微风。
嘿~你知道吗？如果页面被锁住了,requestAnimationFrame这个小工具能迅速停掉动画，解救你的资源！就像咱们在网页上看动画时，要是朋友们正忙着没什么时间欣赏，那就让它们好好歇息一会儿！这个时候，只要启用requestAnimationFrame，轻轻一点，动画马上消失，省电又节约资源
怎样使用requestAnimationFrame？
你想试试requestAnimationFrame吗？这比setTimeout好用多了！简单设置个回调函数，浏览器就会自动在下一次刷新的时候叫醒它。然后你就在这里更新动画，浏览器立马就能把变化呈现在新画面上。
咋整？首先，用animate函数来搞定，它是控制网页每个画面要做什么事的核心部件。然后，用requestAnimationFrame这招，把刚写好的animate函数交给它处理。接下来，浏览器下次刷新的时候就能开始执行animate函数~这样你的动画效果也能越来越有感觉，看着也更舒心！
var timer = requestAnimationFrame( function(){
console.log( '定时器代码' );
} );
怎么解决个叫requestAnimationFrame的辣鸡问题？
那个叫requestAnimationFrame的东西真的很棒，不过有些旧版浏览器就不行。所以，我们就用setTimeout来填补这个空缺。实在不行的话，只能用setTimeout硬着头皮上了，尽管效果差点，但起码能让那些老版浏览器跑得动呀。
nbsp;html>Document window.onload = function(){ var aInput = document.querySelectorAll( "input" ), timer = null; aInput[0].onclick = function(){ timer = requestAnimationFrame( function say(){ console.log( 1 ); timer = requestAnimationFrame( say ); } ); }; aInput[1].onclick = function(){ cancelAnimationFrame( timer ); } }
实战演练：用不同的定时器实现进度条加载动画
快动手，让我们利用大家熟知的setInterval、setTimeout和requestAnimationFrame三种计时器，制作一款进度条加载游戏。亲身感受一下requestAnimationFrame的强大威力~
首先，咱们先试试看setInterval，这个也挺简单的就是让进度条慢慢变粗。不过记得，时间间隔设得太短了容易让浏览器卡住，要是太长了，动画看着就不舒服~
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
用setTimeout，就跟setInterval灵活多了，想更新时随时更新，不需要刻意操作。但是用不好，界面速度可能会受影响。
搞定了没？咱们赶紧用requestAnimationFrame！这个方法超好用的，浏览器帮你处理每一帧画面，保证动画流畅美丽又省资源。从美感和效率角度考虑，requestAnimationFrame绝对是最佳选择！
总结
nbsp;html>Document p{ width:0px; height:40px; border-radius:20px; background:#09f; text-align:center; font:bold 30px/40px '微软雅黑'; color:white; } window.onload = function(){ var oBtn = document.querySelector( "input" ), oBox = document.querySelector( "p" ), timer = null, curWidth = 0, getStyle = function( obj, name, value ){ if( obj.currentStyle ) { return obj.currentStyle[name]; }else { return getComputedStyle( obj, false )[name]; } }; oBtn.onclick = function(){ clearInterval( timer ); oBox.style.width = '0'; timer = setInterval( function(){ curWidth = parseInt( getStyle( oBox, 'width' ) ); if ( curWidth < 1000 ) { oBox.style.width = oBox.offsetWidth + 10 + 'px'; oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%'; }else { clearInterval( timer ); } }, 1000 / 60 ); } }0%
看了讲解和实战操作，你应该已经搞懂requestAnimationFrame了？这个东西让画面动起来更顺滑，又能帮手机省点电量，特实用。下次做动画别忘了用一下，效果绝对赞!
用requestAnimationFrame有啥好玩儿或者让你头疼的事儿么？
评论0