實作動畫效果核心方式的js程式碼_javascript技巧-js教程-PHP中文網

實作動畫效果核心方式的js程式碼_javascript技巧

WBOY

發布： 2016-05-16 17:21:17

原創

1102 人瀏覽過

下邊我就簡單說一下過程和原理。
第一步：實作一個匿名函數並能自行執行。

複製程式碼程式碼如下:

（function(){ }）(>

（function(){ }）(>

這個函數在一樣編的好的JS程式碼中經常會見到，起到閉包，自動執行的效果，在函數後加一對()表示自動執行，前邊的匿名函數需要用( )包起來，這樣才能為宿主（我們的BOM環境）理解，裡面的function(){}這就是個匿名函數。
第二步：實現動畫，以改變一個box的秀明度來說明。
id為animation的div

複製程式碼

程式碼如下:

要實現animation的透明漸變,需要不斷改變其透明度opacity,我們這樣實現

複製程式碼

 程式碼如下:

for(var i=0;i    setTimeout((function(pos){ 
    setTimeout((function(pos){  return function(){

            someAnimation(pos);
        }
    })(i/10),i*100)

} 下面我們來解釋一下這段程式碼，這段程式碼比較複雜和難於理解，所以剛開始不明白也沒事，慢慢就懂了,首先解釋一下setTimeout在此處的用法

複製程式碼

程式碼如下:

setTimeout((function(){})(i/10),i*100)

setTimeout第一個參數為要執行的函數，第二個參數為時間參數，意為多久後開始執行而js沒有區塊的概念，作用域範圍是以函數為準的，所以我們在這裡使用的閉包，實作原理如下：

複製程式碼

 程式碼如下:

(function(function ){
　　return function(){}

})() 這校才可以執行for循環，達到我們想要的結果，如果我們不使用閉包，程式碼會如下：

複製程式碼

程式碼如下:

for(var i=0;i　　setTimeout(function(pos){
　　　　someAnimation(pos);
　　}(i/10),i*100)
　『}(i/10),i*100)

>🎜>這樣的for循環只會執行一次，即i=9時，有興趣的同學可以自己試試到目前為止，整個程式碼是這個樣子滴複製碼

程式碼如下:

(function(){
            document.getElementById("animation"). style.opacity=args;
            }
                setTimeout((function(pos){
                               someAnimation (pos);
                        }
                  }
})()

這樣實現了id為animation的box透明度從0到1的一次變化。
第三步，實現不停地變化，我們用setInterval來實現
setInterval也是兩個參數，第一個是要執行的函數，第二個是執行間隔時間
至此程式碼如下：

複製碼程式碼如下:

(Anunction(){ 


(Anunction(){ 


( ){ 
               setInterval(function(){ 
                for(var i=0;i                   }                            someAnimation(pos); 
                      })(i/10),i*100) 
             
            },2000); 
        })() 

下次我會實現這個程式碼適合使用這個程式碼的設計與出一些方便的設計。
全部程式碼如下

複製程式碼程式碼如下:

程式碼如下: