快捷導(dǎo)航

JS實(shí)現(xiàn)進(jìn)度條順滑版詳細(xì)方案

更新時(shí)間：2021年08月02日 08:36:54 作者：子慕大詩(shī)人

最近在小程序里，做了一個(gè)類似微博刷視頻的需求，其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條，在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑，而后想查查網(wǎng)上看有沒有什么好的方案，但最終沒找到合適的。下面給大家分享JS進(jìn)度條順滑版實(shí)現(xiàn)代碼，需要的朋友參考下吧

進(jìn)度條不順滑

相信大多前端同學(xué)都自己寫過音頻、視頻播放器，實(shí)現(xiàn)并不復(fù)雜。最近在小程序里，做了一個(gè)類似微博刷視頻的需求。其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條，在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑，而后想查查網(wǎng)上看有沒有什么好的方案，但最終沒找到合適的。于是想看看微信小程序里的“微博”進(jìn)度條如何，結(jié)果也是很生硬的動(dòng)畫，下面放了一個(gè)GIF，大家也可以自己搜索微信小程序的微博，找個(gè)視頻看看效果。

常規(guī)方案

最終決定還是優(yōu)化一下這個(gè)問題，先來捋一捋我們現(xiàn)有常規(guī)方案。

監(jiān)聽TimeUpdate事件
獲取到當(dāng)前播放時(shí)間，通過總時(shí)間計(jì)算進(jìn)度百分比（currentTime / duration * 100）
進(jìn)度條width屬性設(shè)置進(jìn)度百分比

現(xiàn)有的方案是依賴事件獲取當(dāng)前播放時(shí)間，而這個(gè)事件大概在100～350毫秒觸發(fā)一次，下面是我記錄的小程序的事件對(duì)象隊(duì)列。

[
    {"detail":{"currentTime":0.10509,"duration":5.83}},
    {"detail":{"currentTime":0.364527,"duration":5.83}},
    {"detail":{"currentTime":0.613648,"duration":5.83}},
]

目前的問題在于，每次獲取到事件，就會(huì)更新進(jìn)度條，沒有過度動(dòng)畫效果，非常的生硬，下面是一個(gè)5s總時(shí)長(zhǎng)的進(jìn)度條變化過程：

核心代碼：

const onProgress = (e, $dom) => {
    const updateFunc = (percent) => {
        $dom.style.width = percent+'%'
    }
    let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1)
    updateFunc(percent)
}

transition

我們能很快想到用CSS的動(dòng)畫屬性來做優(yōu)化，想要靈活的控制，我選擇使用 transition。transition可以定義動(dòng)畫執(zhí)行時(shí)長(zhǎng)，當(dāng)我們改變width時(shí)，transition就會(huì)在規(guī)定時(shí)間內(nèi)用動(dòng)畫的方式改變進(jìn)度條寬度。首先動(dòng)畫執(zhí)行時(shí)長(zhǎng)一定要固定，并且在上一個(gè)執(zhí)行時(shí)長(zhǎng)結(jié)束之前最好不要再對(duì)width做改動(dòng)，否則會(huì)導(dǎo)致沖突，動(dòng)畫會(huì)變得很奇怪。

選擇一個(gè)合理的transition執(zhí)行時(shí)間：0.5s
根據(jù)當(dāng)前總時(shí)長(zhǎng)，求出0.5s在進(jìn)度條中所屬百分比（100/duration/2）
第一次TimeUpdate事件，就執(zhí)行width改變，把進(jìn)度條設(shè)置到0.5s的位置：width = 100/duration/2
非第一次TimeUpdate事件，每當(dāng)currentTime超過上一次進(jìn)度條位置，就更新當(dāng)前進(jìn)度條百分比

聽起來有點(diǎn)不好理解，我們畫個(gè)圖:

當(dāng)?shù)谝淮斡|發(fā)TimeUpdate事件,0.1336秒的時(shí)候（當(dāng)然這個(gè)值隨機(jī)的，可能是0.1～0.3之間），我們就設(shè)置width到0.5s的位置，這樣進(jìn)度條就和視頻同步在運(yùn)動(dòng)，和真實(shí)的進(jìn)度相差微弱的0.1秒。在動(dòng)畫執(zhí)行的0.5s之間，UpdateTime也會(huì)有多次觸發(fā)，
當(dāng)某次UpdateTime的currentTime（0.7123s，這個(gè)值也是隨機(jī)的）值大于上次執(zhí)行的0.5s時(shí)，這個(gè)時(shí)候進(jìn)度條的位置大概也在0.5s周圍，我們?cè)俅斡|發(fā)下一個(gè)0.5s動(dòng)畫，也就是把width設(shè)置為1s的進(jìn)度條位置
而后下個(gè)迭代currentTime>1s，width設(shè)置為1.5s，這樣循環(huán)下去。

核心代碼：

const playControl = {
  percent: 0,
  time: 0,
  duration: 0,
  first: true
}
const onProgress = (e, $dom) => {
    const updateFunc = (percent) => {
        playControl.percent = percent
        playControl.time = e.detail.currentTime
        $dom.style.width = percent+'%'
    }
    //當(dāng)前視頻進(jìn)度第一次更新
    if (playControl.first) {
        playControl.duration = e.detail.duration
        playControl.first = false
        updateFunc(100 / e.detail.duration / 2)
    } else {
        let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1)
        if (percent - playControl.percent > 0 || e.detail.currentTime >= e.detail.duration) {
            updateFunc(percent)
        }
    }
}

最終效果對(duì)比（PS：gif圖效果有折損）