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

最后做出來(lái)的效果如下圖所示：

小狗奔跑的動(dòng)畫(huà)是一個(gè)lottie動(dòng)畫(huà)，來(lái)自 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這個(gè)字段告知當(dāng)前文件的總字節(jié)數(shù)，如下圖所示：

一般CDN都會(huì)有這個(gè)字段。拿到下載進(jìn)度之后便可用來(lái)?yè)Q算寬度或者位置。

2. 沒(méi)有動(dòng)畫(huà)的loading

如果我們不做動(dòng)畫(huà)，直接設(shè)置translate位置，那么看起來(lái)是這樣的：

代碼如下所示：

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

3. 加上transform動(dòng)畫(huà)

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

由于progress event觸發(fā)得比較快，加上做動(dòng)畫(huà)的話不需要觸發(fā)得那么快，所以給它加一個(gè)節(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é)流也是可以的，這里只是一個(gè)優(yōu)化。

做transform動(dòng)畫(huà)的邏輯便在上面的onDownloadProgress這個(gè)函數(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;
  // 動(dòng)畫(huà)時(shí)間和節(jié)流時(shí)間保持一致
  const time = 250;
  // 獲取到當(dāng)前運(yùn)動(dòng)的位移
  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)度條類(lèi)似，省略
 }
}

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

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

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

效果如下圖所示：

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論