JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
術(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ù)大家的!
- js實(shí)現(xiàn)帶箭頭的進(jìn)度流程
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- javascript+css實(shí)現(xiàn)進(jìn)度條效果
- JS實(shí)現(xiàn)可控制的進(jìn)度條
- js實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
- node.js實(shí)現(xiàn)帶進(jìn)度條的多文件上傳
- js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
- 教你3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽(tīng)的文件上傳預(yù)覽組件
- 詳解JavaScript進(jìn)度管理
相關(guān)文章
通用javascript代碼判斷版本號(hào)是否在版本范圍之間
通用判斷版本號(hào)是否在兩者之間,也可以搭配判斷是否大于某版本號(hào),小于取反即可,本文給大家介紹通用javascript代碼判斷版本號(hào)是否在版本范圍之間,需要的朋友參考下2015-11-11純js實(shí)現(xiàn)無(wú)限空間大小的本地存儲(chǔ)
這篇文章主要介紹了純js實(shí)現(xiàn)無(wú)限空間大小的本地存儲(chǔ)的功能,源碼和demo都放給大家,本文著重說(shuō)下實(shí)現(xiàn)的原理,具體的實(shí)踐擴(kuò)展小伙伴們自由發(fā)揮吧。2015-06-06JavaScript中判斷整字類(lèi)型最簡(jiǎn)潔的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中判斷整字類(lèi)型最簡(jiǎn)潔的實(shí)現(xiàn)方法,本文給出多個(gè)判斷整數(shù)的方法,最后總結(jié)出一個(gè)最短、最簡(jiǎn)潔的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-11-11微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄的相關(guān)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JavaScript 正則表達(dá)式中g(shù)lobal模式的特性
這篇文章主要介紹了JavaScript 正則表達(dá)式中g(shù)lobal模式的特性 的相關(guān)資料,需要的朋友可以參考下2016-02-02javascript關(guān)于open.window子頁(yè)面執(zhí)行完成后刷新父頁(yè)面的問(wèn)題分析
這篇文章主要介紹了javascript關(guān)于open.window子頁(yè)面執(zhí)行完成后刷新父頁(yè)面的問(wèn)題,實(shí)例分析了javascript操作子頁(yè)面的執(zhí)行與父頁(yè)面的刷新技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript中函數(shù)的防抖與節(jié)流詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的防抖與節(jié)流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02一文教你學(xué)會(huì)用JS實(shí)現(xiàn)圖片懶加載功能
圖片懶加載是日常開(kāi)發(fā)會(huì)經(jīng)常使用的一個(gè)功能,但是在日常中可能使用v-lazy便直接實(shí)現(xiàn)了圖片懶加載,但是本文將通過(guò)原生js來(lái)實(shí)現(xiàn)一下圖片懶加載的功能,感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-07-07