您好,登錄后才能下訂單哦!
術(shù)上沒太大難度,有難度的地方是怎么讓整個動畫比較流暢。一個主要問題是動畫的滯后性:當下載進度到某個點的時候,你再用250ms的動畫過渡過去,這個時候已經(jīng)慢了,所以很多人可能因為這個原因或者嫌麻煩,直接就不做動畫了,在進度事件觸發(fā)的時候直接更新進度條相應(yīng)的位置,不過我們可以嘗試實現(xiàn)一下。
最后做出來的效果如下圖所示:
小狗奔跑的動畫是一個lottie動畫,來自 codepen 。
1. 獲取下載進度
ajax里面可以拿到下載進度,如下代碼所示:
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這個字段告知當前文件的總字節(jié)數(shù),如下圖所示:
一般CDN都會有這個字段。拿到下載進度之后便可用來換算寬度或者位置。
2. 沒有動畫的loading
如果我們不做動畫,直接設(shè)置translate位置,那么看起來是這樣的:
代碼如下所示:
let percentComplete = event.loaded / event.total; let left = containerWidth * percentComplete; // 狗的位置直接設(shè)置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動畫結(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));
當然你不加節(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; // 獲取到當前運動的位移 let lastTransform = window.getComputedStyle(dogBox).transform || 'translateX(0)'; // 使用原生web animation dogBox.animate({ transform: [lastTransform, `translateX(${left}px)`] }, { easing: 'linear', fill: 'forwards', duration: time }); // 進度條類似,省略 } }
上面動畫的時間為250ms和節(jié)流的時間保持一致,這樣下次觸發(fā)的時候上次的動畫差不多剛好做完(實際上是慢了一點)。并且每次觸發(fā)動畫的時候都是獲取當前的translate位置,做為本次動畫的起點,這樣可以保證動畫的連貫性。
另外,由于我們使用了節(jié)流很可能會導(dǎo)致最后的那次100%的觸發(fā)丟了,所以需要在完成的時候手動調(diào)一下onProgressDownload,否則會沒有完成態(tài)。
如果是播放進度條的例子,需要監(jiān)聽video/audio元素的timeupdate事件,這個事件的觸發(fā)約 250ms (實測)觸發(fā)一次,可以不用節(jié)流。
效果如下圖所示:
我們發(fā)現(xiàn)在最后數(shù)字已經(jīng)顯示總大小了即已經(jīng)下載完成了,但是那條狗離終點還有段距離,在我們這個例子似乎沒那么明顯,不仔細看還看不太出來。但如果下載速度很快的時候這個問題會更加明顯,在播放進度條的例子便是如果進度條很長,但是播放的視頻只有10幾秒,那么應(yīng)該也會比較明顯。
一個簡單的解決方法是假定下一個250ms的下載速度保持一致,每次運動的時候都提前運動250ms,如果在播放video的例子里面這個假定幾乎是對的,因為比較勻速,而下載速度不可控,但在連續(xù)相同很短的時間內(nèi)我們估且認為是一樣。
所以我們可以記錄一下上一次的位置,然后加多一個偏移,如下代碼所示:
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)一個下載進度條及播放進度條的代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。