[前端,外掛]關於Loadingbar

之前看到Loadingbar就會覺得莫名開心
才發現我其實是loading控!愛到想要把Loadingbar的祖宗十八代都挖出來~

但其實Loadingbar的做法有很多種,用flash、CSS、gif做動畫,再用as或Js去控制,控制方法也不只一種,用.load或TweenLite...等等,持續研究更新囉!
progressBar:也可以用這個去找相關資料

Loadingbar的各種寫法

*Flash寫法

Flash去就不討論了

*TweenLite.fromTo

可以參考這邊
用這個控制時間跟淡入淡出,如下:
function enterPreloader() {

     TweenLite.fromTo( '#preloadArt2',2.6,{ width: 250, opacity: 0, marginLeft: -200, marginTop: -200, height: 400 },{ width: 652, height: 652, opacity: 1, ease: Expo.easeOut, marginLeft: -326, marginTop: -326, onComplete: function () { sequencer.nextStep() } }

      );

    TweenLite.fromTo('#preloadArt', .7, { opacity: 0 },{ opacity: 1, ease: Linear.easeNone, delay: 1.5 });}

*Doms

老實說我是第一次看到這個指令,有機會繼續鑽研!

*GIF圖檔+.load

先Photoshop做一個gif檔的動畫,再用JS的load指令去跑~
.load是用來偵測檔案是否下載完成的,不過下載時間不確定,我都會再加個計時器來使用。

*CSS寫動畫+JS外掛

參考網頁
用CSS寫好自己想要的動畫再掛他的JS就可以用了!

沒有留言:

Instagram