這篇文章主要介紹了html5如何制作新增的定時(shí)器requestAnimationFrame,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到宜都網(wǎng)站設(shè)計(jì)與宜都網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋宜都地區(qū)。
在requestAnimationFrame出現(xiàn)之前,我們一般都用setTimeout和setInterval,那么html5為什么新增一個(gè)requestAnimationFrame,他的出現(xiàn)是為了解決什么問(wèn)題?
優(yōu)勢(shì)與特點(diǎn):
1)requestAnimationFrame會(huì)把每一幀中的所有DOM操作集中起來(lái),在一次重繪或回流中就完成,并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率
2)在隱藏或不可見(jiàn)的元素中,requestAnimationFrame將不會(huì)進(jìn)行重繪或回流,這當(dāng)然就意味著更少的CPU、GPU和內(nèi)存使用量
3)requestAnimationFrame是由瀏覽器專門為動(dòng)畫提供的API,在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用,并且如果頁(yè)面不是激活狀態(tài)下的話,動(dòng)畫會(huì)自動(dòng)暫停,有效節(jié)省了CPU開銷
一句話就是:這玩意性能高,不會(huì)卡屏,根據(jù)不同的瀏覽器自動(dòng)調(diào)整幀率。如果看不懂或者不理解,也沒(méi)有什么關(guān)系,這玩意跟瀏覽器渲染原理有關(guān)。我們先學(xué)會(huì)使用它!
如何使用requestAnimationFrame?
使用方式跟定時(shí)器setTimeout差不多,不同之處在于,他不需要設(shè)置時(shí)間間隔參數(shù)
var timer = requestAnimationFrame( function(){ console.log( '定時(shí)器代碼' ); } );
參數(shù)是一個(gè)回調(diào)函數(shù),返回值是一個(gè)整數(shù),用來(lái)表示定時(shí)器的編號(hào).
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> 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 ); } } </script> </head> <body> <input type="button" value="開啟"> <input type="button" value="關(guān)閉"> </body> </html>
cancelAnimationFrame用來(lái)關(guān)閉定時(shí)器
這個(gè)方法需要處理兼容:
簡(jiǎn)單的兼容:
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
如果瀏覽器都不認(rèn)識(shí)AnimationFrame,就用setTimeout兼容.
運(yùn)用3種不同的定時(shí)器(setTimeout, setInterval, requestAnimationFrame)實(shí)現(xiàn)一個(gè)進(jìn)度條的加載
一、setInterval方式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width:0px; height:40px; border-radius:20px; background:#09f; text-align:center; font:bold 30px/40px '微軟雅黑'; color:white; } </style> <script> 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 ); } } </script> </head> <body> <p>0%</p> <p><input type="button" value="ready!Go"></p> </body> </html>
二、setTimeout方式
<script> 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(){ clearTimeout( timer ); oBox.style.width = '0'; timer = setTimeout( function go(){ curWidth = parseInt( getStyle( oBox, 'width' ) ); if ( curWidth < 1000 ) { oBox.style.width = oBox.offsetWidth + 10 + 'px'; oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%'; timer = setTimeout( go, 1000 / 60 ); }else { clearInterval( timer ); } }, 1000 / 60 ); } } </script>
三、requestAnimationFrame方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width:0px; height:40px; border-radius:20px; background:#09f; text-align:center; font:bold 30px/40px '微軟雅黑'; color:white; } </style> <script> 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(){ cancelAnimationFrame( timer ); oBox.style.width = '0'; timer = requestAnimationFrame( function go(){ curWidth = parseInt( getStyle( oBox, 'width' ) ); if ( curWidth < 1000 ) { oBox.style.width = oBox.offsetWidth + 10 + 'px'; oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%'; timer = requestAnimationFrame( go ); }else { cancelAnimationFrame( timer ); } } ); } } </script> </head> <body> <p>0%</p> <p><input type="button" value="ready!Go"></p> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“html5如何制作新增的定時(shí)器requestAnimationFrame”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
當(dāng)前題目:html5如何制作新增的定時(shí)器requestAnimationFrame
本文地址:http://bm7419.com/article10/iposgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)