技術上沒太大難度，有難度的地方是怎麼讓整個動畫比較流暢。一個主要問題是動畫的滯後性:當下載進度到某個點的時候，你再用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;

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