首頁  >  文章  >  web前端  >  實作動畫效果核心方式的js程式碼_javascript技巧

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

WBOY
WBOY原創
2016-05-16 17:21:171057瀏覽

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

複製程式碼 程式碼如下:

(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((function(){})(i/10),i*100)
複製程式碼


程式碼如下:

(function(function ){
  return function(){}
複製程式碼


程式碼如下:


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

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


程式碼如下:





   
   
   


   

   

   
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn