RequestAnimationFrame()javascript
這個方法是關於動畫的,詳細緣由能夠閱讀相關資料(javascript高級程序設計25章-新興的API)。java
RequestAnimationFrame() 接受一個參數,即在重回屏幕前調用的一個函數(就是動畫所執行的函數),這個函數負責改變下一次從新繪製的DOM樣式。web
循環的方式與setTimeout() 方法同樣,全局啓動,函數內部調用自身,造成循環。函數
傳入該方法的函數接受一個參數,他是一個時間碼,(從1970年一月一日至今的毫秒數--不小啊)表示下一次從新繪製的實際發生時間。動畫
說真的,我不太清楚這個時間有什麼用。網站
而後來貼一個例子:MDNspa
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var start = null; var d = document.getElementById('SomeElementYouWantToAnimate'); function step(timestamp) { if (start === null) start = timestamp; var progress = timestamp - start; d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { requestAnimationFrame(step); } } requestAnimationFrame(step);
而後我想作一個輪播的效果,之前作過一次,結果屎同樣的效果,至今未不想改囧。決定從新作一個,而且帶小點點能夠操控,我就不插入圖片了。設計
貼出個人bug,額是代碼:code
//強行用這個方法=_= //上下輪播,原理是移動img的父元素,將更外層的父元素設置爲域外隱藏 overflow:hidden; var qt=document.querySelector('#qt'); window.requestAnimationFrame=window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame; var start= null; var tt= 0, nei, wai; //draw中遇到的問題就是 element.style.top 是一個帶單位的字符串,而不是一個數!這一點必定要注意! function draw(){ console.log(parseInt(tt)); if(parseInt(tt)==-1500){ qt.style.top=0+'px'; }else{ qt.style.top=(parseInt(tt)-300)+'px'; } tt=qt.style.top; nei=setTimeout(yc,2000); } function yc(){ requestAnimationFrame(draw); } wai=setTimeout(yc,2000); //下面是小點點操控,當鼠標移入小點點父元素內時正常輪播,點擊對應的小點點中止輪播,顯示對應的圖片,而且捕捉容器的top值,若是不捕捉就會繼續上一次輪播的top繼續而不是接着你點擊的圖片繼續 window.onload=function(){ var zong=document.querySelector('#zong'); zong.onclick=function(event){ console.log(event.target.id); switch (event.target.id) { case 'id1': clearTimeout(nei); clearTimeout(wai); qt.style.top = 0 + 'px'; tt = qt.style.top; break; case 'id2': clearTimeout(nei); clearTimeout(wai); qt.style.top = -300 + 'px'; tt = qt.style.top; break; case 'id3': clearTimeout(nei); clearTimeout(wai); qt.style.top = -600 + 'px'; tt = qt.style.top; break; case 'id4': clearTimeout(nei); clearTimeout(wai); qt.style.top = -900 + 'px'; tt = qt.style.top; break; case 'id5': clearTimeout(nei); clearTimeout(wai); qt.style.top = -1200 + 'px'; tt = qt.style.top; break; case 'id6': clearTimeout(nei); clearTimeout(wai); qt.style.top = -1500 + 'px'; tt = qt.style.top; break; } }; //最後移除點點區域開始正常輪播,從新啓動(其實也能夠鼠標移除小點點就開始輪播,通常網站上都是這樣,不難實現) zong.onmouseleave=function(){ clearTimeout(nei); clearTimeout(wai); tt=qt.style.top || 0; setTimeout(yc,2000); } }
其實作完了仍是比較高興,雖然很簡單。blog
三秒鐘之後感受不對。
零點五秒後發現,不用RequestAnimationFrame()方法也能作啊!我只不過驗證了這個方法裏的代碼能跑!
*!
收穫就是setTimeout()裏面的RequestAnimationFrame()方法會當即執行不會排隊。