欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼

 更新時(shí)間:2019年06月10日 16:24:52   作者:會(huì)編程的銀豬  
這篇文章主要介紹了JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

術(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ù)大家的!

相關(guān)文章

最新評(píng)論