實(shí)現(xiàn)動畫效果核心方式的js代碼

2019-11-20 21:56:21

字體：大中小

供稿：網(wǎng)友

下邊我就簡單說一下過程和原理。
第一步：實(shí)現(xiàn)一個匿名函數(shù)并能自己執(zhí)行。

（function(){ }）()

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

復(fù)制代碼代碼如下:

要實(shí)現(xiàn)animation的透明漸變,需要不斷改變其透明度opacity,我們這樣實(shí)現(xiàn)

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

這校才可以執(zhí)行for循環(huán)，達(dá)到我們想要的結(jié)果，如果我們不使用閉包，代碼會如下：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

(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) 
            } 
})() 

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

復(fù)制代碼代碼如下:

(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); 
        })() 

下次我會實(shí)現(xiàn)這個代碼的面向?qū)ο蠡O(shè)計和出一些具體的實(shí)現(xiàn)方案，方便學(xué)習(xí)使用。
全部代碼如下

復(fù)制代碼代碼如下:

<!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>