快捷導(dǎo)航

JS中實現(xiàn)一個下載進(jìn)度條及播放進(jìn)度條的代碼

更新時間：2019年06月10日 16:24:52 作者：會編程的銀豬

這篇文章主要介紹了JS中實現(xiàn)一個下載進(jìn)度條及播放進(jìn)度條的代碼,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

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

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

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

1. 獲取下載進(jìn)度

ajax里面可以拿到下載進(jìn)度，如下代碼所示：

 let xhr = new XMLHttpRequest();
 const downloadUrl = 'installer.dmg';
 xhr.open('GET', downloadUrl, true);
 xhr.addEventListener('progress', function (event) {
  // 響應(yīng)頭要有Content-Length
  if (event.lengthComputable) {
   let percentComplete = event.loaded / event.total;
   console.log(percentComplete); // 最后輸出1
  }
 }, false);
 xhr.send();

前提是響應(yīng)頭里面有Content-Length這個字段告知當(dāng)前文件的總字節(jié)數(shù)，如下圖所示：

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

2. 沒有動畫的loading

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

代碼如下所示：

let percentComplete = event.loaded / event.total;
let left = containerWidth * percentComplete;
// 狗的位置直接設(shè)置translate
dogBox.style.transform = `translateX(${left}px)`;
// 進(jìn)度條的位置也是translate，一開始是用translateX(-100%)挪到外面去
currentProgressBar.style.transform = `translateX(${percentComplete * 100 - 100}%)`;
在我們這個例子里面會顯得特別突兀，一卡一卡的感覺，如果沒有上面那條狗可能還會好一點。所以我們給它加個transform動畫。

3. 加上transform動畫

transform動畫怎么做呢？方法有很多：jQuery的animate、Web Animation、requestAnimationFrame、CSS動畫結(jié)合JS控制、其它第三方動畫庫等等，我比較喜歡用原生Web Animation。

由于progress event觸發(fā)得比較快，加上做動畫的話不需要觸發(fā)得那么快，所以給它加一個節(jié)流。如下代碼所示：

// 最快250ms觸發(fā)一次
function throttle (func, limit = 250) {
 let inThrottle = false;
 return function() {
  const args = arguments;
  const context = this;
  if (!inThrottle) {
   func.apply(context, args);
   inThrottle = true;
   setTimeout(() => inThrottle = false, limit);
  }
 }
}
function onDownloadProgress (event) {
 
}
xhr.addEventListener('progress', throttle(onDownloadProgress));

當(dāng)然你不加節(jié)流也是可以的，這里只是一個優(yōu)化。

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

function onDownloadProgress (event) {
 let currentProgressBar = document.querySelector('.current-progress-bar');
 let dogBox = document.querySelector('.dog-box');
 let containerWidth = document.querySelector('.progress-bar').clientWidth;
 
 if (event.lengthComputable) {
  let percentComplete = event.loaded / event.total;
  let left = containerWidth * percentComplete;
  // 動畫時間和節(jié)流時間保持一致
  const time = 250;
  // 獲取到當(dāng)前運(yùn)動的位移
  let lastTransform = window.getComputedStyle(dogBox).transform || 'translateX(0)';
  // 使用原生web animation
  dogBox.animate({
   transform: [lastTransform, `translateX(${left}px)`]
  }, {
   easing: 'linear',
   fill: 'forwards',
   duration: time
  });
  // 進(jìn)度條類似，省略
 }
}

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

另外，由于我們使用了節(jié)流很可能會導(dǎo)致最后的那次100%的觸發(fā)丟了，所以需要在完成的時候手動調(diào)一下onProgressDownload，否則會沒有完成態(tài)。

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

效果如下圖所示：

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

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

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

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

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

這個案例到這里基本就介紹結(jié)束，這個例子比較簡單，不過你可能會覺得web animation的兼容性不太好。主要是在Chrome的兼容性比較好，其它主流的瀏覽器的新版本也已經(jīng)開始支持了。其它不支持的瀏覽器可以使用谷歌官方的一個 polyfill ，就是比較大一點。它和CSS動畫一樣，但是可以用JS去控制開始暫停等，所以它和CSS動畫一樣具有GPU加速，不占用JS線程等優(yōu)勢。

總結(jié)

以上所述是小編給大家介紹的JS中實現(xiàn)一個下載進(jìn)度條及播放進(jìn)度條的代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: