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

技術上沒太大難度，有難度的地方是怎麼讓整個動畫比較流暢。一個主要問題是動畫的滯後性：當下載進度到某個點的時候，你再用250ms的動畫過渡過去，這個時候已經慢了，因此不少人可能由於這個緣由或者嫌麻煩，直接就不作動畫了，在進度事件觸發的時候直接更新進度條相應的位置，不過咱們能夠嘗試實現一下。

最後作出來的效果以下圖所示：

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

1. 獲取下載進度

ajax裏面能夠拿到下載進度，以下代碼所示：

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

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

通常CDN都會有這個字段。拿到下載進度以後即可用來換算寬度或者位置。

2. 沒有動畫的loading

若是咱們不作動畫，直接設置translate位置，那麼看起來是這樣的：

代碼以下所示：

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

在咱們這個例子裏面會顯得特別突兀，一卡一卡的感受，若是沒有上面那條狗可能還會好一點。因此咱們給它加個transform動畫。

3. 加上transform動畫

transform動畫怎麼作呢？方法有不少：jQuery的animate、Web Animation、requestAnimationFrame、CSS動畫結合JS控制、其它第三方動畫庫等等，我比較喜歡用原生Web Animation。

因爲progress event觸發得比較快，加上作動畫的話不須要觸發得那麼快，因此給它加一個節流。以下代碼所示：

// 最快250ms觸發一次
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));複製代碼

固然你不加節流也是能夠的，這裏只是一個優化。

作transform動畫的邏輯便在上面的onDownloadProgress這個函數裏面處理，以下代碼所示：

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;
    // 動畫時間和節流時間保持一致
    const time = 250;
    // 獲取到當前運動的位移
    let lastTransform = window.getComputedStyle(dogBox).transform || 'translateX(0)';
    // 使用原生web animation
    dogBox.animate({
      transform: [lastTransform, `translateX(${left}px)`]
    }, {
      easing: 'linear',
      fill: 'forwards',
      duration: time
    });
    // 進度條相似，省略
  }
}複製代碼

上面動畫的時間爲250ms和節流的時間保持一致，這樣下次觸發的時候上次的動畫差很少恰好作完（其實是慢了一點）。而且每次觸發動畫的時候都是獲取當前的translate位置，作爲本次動畫的起點，這樣能夠保證動畫的連貫性。

另外，因爲咱們使用了節流極可能會致使最後的那次100%的觸發丟了，因此須要在完成的時候手動調一下onProgressDownload，不然會沒有完成態。

若是是播放進度條的例子，須要監聽video/audio元素的timeupdate事件，這個事件的觸發約250ms（實測）觸發一次，能夠不用節流。

效果以下圖所示：

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

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

因此咱們能夠記錄一下上一次的位置，而後加多一個偏移，以下代碼所示：

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

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

這個案例到這裏基本就介紹結束，這個例子比較簡單，不過你可能會以爲web animation的兼容性不太好。主要是在Chrome的兼容性比較好，其它主流的瀏覽器的新版本也已經開始支持了。其它不支持的瀏覽器可使用谷歌官方的一個polyfill，就是比較大一點。它和CSS動畫同樣，可是能夠用JS去控制開始暫停等，因此它和CSS動畫同樣具備GPU加速，不佔用JS線程等優點。