用js實現動畫效果核心方式

高明無思發表於2013-09-22
JS動畫

為了做好導航選單，有時候需要在選單下拉的時候實現動畫效果，所以這幾天就研究了研究如何用js實現動畫效果，實現動畫核心要用到兩個函式，一個是setTimeOut,另一個是setInterval.

下邊我就簡單說一下過程和原理。

第一步：實現一個匿名函式並能自己執行。

（function(){ }）()

 這個函式在一樣編的好的JS程式碼中經常會見到，起到閉包，自動執行的效果，在函式後加一對()表示自動執行，前邊的匿名函式需要用()包起來，這樣才能為宿主（我們的BOM環境）理解，裡面的function(){}這就是個匿名函式。

第二步：實現動畫，以改變一個box的秀明度來說明。

id為animation的div

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

 

相關文章