jquery進度條動畫(js進度條真實進度)

本篇文章給大家談談jquery進度條動畫，以及js進度條真實進度對應的知識點，文章可能有點長，但是希望大家可以閱讀完，增長自己的知識，最重要的是希望對各位有所幫助，可以解決了您的問題，不要忘了收藏本站喔。

如何實現一個下載進度條/播放進度條

技術上沒太大難度，有難度的地方是怎么讓整個動畫比較流暢。一個主要問題是動畫的滯后性:當下載進度到某個點的時候，你再用250ms的動畫過渡過去，這個時候已經慢了，所以很多人可能因為這個原因或者嫌麻煩，直接就不做動畫了，在進度事件觸發的時候直接更新進度條相應的位置，不過我們可以嘗試實現一下。

最后做出來的效果如下圖所示:

小狗奔跑的動畫是一個lottie動畫，來自codepen。

1.獲取下載進度

ajax里面可以拿到下載進度，如下代碼所示:

letxhr=newXMLHttpRequest();constdownloadUrl='installer.dmg';xhr.open('GET',downloadUrl,true);xhr.addEventListener('progress',function(event){//響應頭要有Content-Lengthif(event.lengthComputable){letpercentComplete=event.loaded/event.total;console.log(percentComplete);//最后輸出1}},false);xhr.send();

前提是響應頭里面有Content-Length這個字段告知當前文件的總字節數，如下圖所示:

一般CDN都會有這個字段。拿到下載進度之后便可用來換算寬度或者位置。

2.沒有動畫的loading

如果我們不做動畫，直接設置translate位置，那么看起來是這樣的:

代碼如下所示:

letpercentComplete=event.loaded/event.total;letleft=containerWidth*percentComplete;//狗的位置直接設置translatedogBox.style.transform=`translateX(${left}px)`;//進度條的位置也是translate，一開始是用translateX(-100%)挪到外面去currentProgressBar.style.transform=`translateX(${percentComplete*100-100}%)`;

在我們這個例子里面會顯得特別突兀，一卡一卡的感覺，如果沒有上面那條狗可能還會好一點。所以我們給它加個transform動畫。

3.加上transform動畫

transform動畫怎么做呢?方法有很多:jQuery的animate、WebAnimation、requestAnimationFrame、CSS動畫結合JS控制、其它第三方動畫庫等等，我比較喜歡用原生WebAnimation。

由于progressevent觸發得比較快，加上做動畫的話不需要觸發得那么快，所以給它加一個節流。如下代碼所示:

//最快250ms觸發一次functionthrottle(func,limit=250){letinThrottle=false;returnfunction(){constargs=arguments;constcontext=this;if(!inThrottle){func.apply(context,args);inThrottle=true;setTimeout(()=>inThrottle=false,limit);}}}functiononDownloadProgress(event){}xhr.addEventListener('progress',throttle(onDownloadProgress));

當然你不加節流也是可以的，這里只是一個優化。

做transform動畫的邏輯便在上面的onDownloadProgress這個函數里面處理，如下代碼所示:

functiononDownloadProgress(event){letcurrentProgressBar=document.querySelector('.current-progress-bar');letdogBox=document.querySelector('.dog-box');letcontainerWidth=document.querySelector('.progress-bar').clientWidth;if(event.lengthComputable){letpercentComplete=event.loaded/event.total;letleft=containerWidth*percentComplete;//動畫時間和節流時間保持一致consttime=250;//獲取到當前運動的位移letlastTransform=window.getComputedStyle(dogBox).transform||'translateX(0)';//使用原生webanimationdogBox.animate({transform:[lastTransform,`translateX(${left}px)`]},{easing:'linear',fill:'forwards',duration:time});//進度條類似，省略}}

上面動畫的時間為250ms和節流的時間保持一致，這樣下次觸發的時候上次的動畫差不多剛好做完(實際上是慢了一點)。并且每次觸發動畫的時候都是獲取當前的translate位置，做為本次動畫的起點，這樣可以保證動畫的連貫性。

另外，由于我們使用了節流很可能會導致最后的那次100%的觸發丟了，所以需要在完成的時候手動調一下onProgressDownload，否則會沒有完成態。

如果是播放進度條的例子，需要監聽video/audio元素的timeupdate事件，這個事件的觸發約250ms(實測)觸發一次，可以不用節流。

效果如下圖所示:

我們發現在最后數字已經顯示總大小了即已經下載完成了，但是那條狗離終點還有段距離，在我們這個例子似乎沒那么明顯，不仔細看還看不太出來。但如果下載速度很快的時候這個問題會更加明顯，在播放進度條的例子便是如果進度條很長，但是播放的視頻只有10幾秒，那么應該也會比較明顯。

一個簡單的解決方法是假定下一個250ms的下載速度保持一致，每次運動的時候都提前運動250ms，如果在播放video的例子里面這個假定幾乎是對的，因為比較勻速，而下載速度不可控，但在連續相同很短的時間內我們估且認為是一樣。

所以我們可以記錄一下上一次的位置，然后加多一個偏移，如下代碼所示:

letdiffX=(event.loaded-lastMB)/event.total*containerWidth;//在原本的基礎上再加多一個偏移(且不能超過容器的寬度)letleft=Math.min(containerWidth,containerWidth*percentComplete+diffX);lastMB=downloadedMB;

這樣就比較對得上了，效果如下圖所示:

如何實現上傳文件帶進度條

chrome可以的，IE8IE9不知道。新版本的ajax可以做到獲取上傳進度

jQueryUploadProgressandAJAXfileupload

簡單的例子是

如何實現jQuery進度條效果

動態改變一個有背景色的層的寬度就可以了！如果想要效果好，這類插件一搜一大把！

我上傳了一半怎么進度條就不動了

jqueryuploadify上傳文件.文件不上傳，且進度條不動，文件不上傳肯定進度條不會動的啊，是關聯上的，檢查代碼或者網絡看看是否通不通。

keep怎么設置數據動態

設置數據動態需要使用keep中的計算公式。具體操作步驟如下：首先，在需要設置數據動態的單元格中輸入計算公式；其次，選中該單元格，點擊“數據格式”選項卡中的“下拉菜單”；然后，在彈出的選項中選擇“設置為動態選項”即可完成數據動態設置。這樣，當其他單元格中的數據發生更改時，該單元格中的數據也會自動更新。keep中提供了多種計算公式，可以用于實現不同的數據動態效果。例如，使用“if”公式可以實現條件判斷，使用“sum”公式可以實現求和計算，使用“rand”公式可以實現隨機數生成等。熟練掌握這些公式，能夠更方便地實現數據動態效果。