實現動畫效果核心方式的js代碼

2019-11-20 21:56:21

字體：大中小

來源：轉載

供稿：網友

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

（function(){ }）()

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

復制代碼代碼如下:

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

(function(){ 
            function someAnimation(args){ 
                document.getElementById("animation").style.opacity=args; 
            } 
            for(var i=0;i<10;i++){ 
                    setTimeout((function(pos){ 
                        return function(){ 
                            someAnimation(pos); 
                        } 
                    })(i/10),i*100) 
            } 
})() 

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

復制代碼代碼如下:

(function(){ 
            function someAnimation(args){ 
                document.getElementById("animation").style.opacity=args; 
            } 
            setInterval(function(){ 
                for(var i=0;i<10;i++){ 
                    setTimeout((function(pos){ 
                        return function(){ 
                            someAnimation(pos); 
                        } 
                    })(i/10),i*100) 
                } 
            },2000); 
        })() 

下次我會實現這個代碼的面向對象化設計和出一些具體的實現方案，方便學習使用。
全部代碼如下

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #animation{width:500px;height:350px;background-color:red;}
    </style>
</head>
<body>
    <div id="animation">
    </div>
    <script type="text/javascript">
        (function(){
            function someAnimation(args){
                document.getElementById("animation").style.opacity=args;
            }
            setInterval(function(){
                for(var i=0;i<10;i++){
                    setTimeout((function(pos){
                        return function(){
                            someAnimation(pos);
                        }
                    })(i/10),i*100)
                }
            },2000);
        })()
    </script>
</body>
</html>