有關於requsetAnimationFrame 以及作一個簡單的輪播

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()方法會當即執行不會排隊。

相關文章
相關標籤/搜索