JS進度條順滑版實現

子慕大詩人發表於2021-08-02
JS

進度條不順滑

相信大多前端同學都自己寫過音訊、視訊播放器，實現並不複雜。最近在小程式裡，做了一個類似微博刷視訊的需求。其中有一部分功能需要實現自定義進度條，在做完第一版之後發現進度條不順滑，而後想查查網上看有沒有什麼好的方案，但最終沒找到合適的。於是想看看微信小程式裡的“微博”進度條如何，結果也是很生硬的動畫，下面放了一個GIF，大家也可以自己搜尋微信小程式的微博，找個視訊看看效果。

ezgif.com-gif-maker (1).gif

常規方案

最終決定還是優化一下這個問題，先來捋一捋我們現有常規方案。

  • 監聽TimeUpdate事件
  • 獲取到當前播放時間，通過總時間計算進度百分比（currentTime / duration * 100）
  • 進度條width屬性設定進度百分比

現有的方案是依賴事件獲取當前播放時間，而這個事件大概在100～350毫秒觸發一次，下面是我記錄的小程式的事件物件佇列。

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

目前的問題在於，每次獲取到事件，就會更新進度條，沒有過度動畫效果，非常的生硬，下面是一個5s總時長的進度條變化過程：

ezgif.com-gif-maker.gif

核心程式碼：

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的動畫屬性來做優化，想要靈活的控制，我選擇使用 transition。transition可以定義動畫執行時長，當我們改變width時，transition就會在規定時間內用動畫的方式改變進度條寬度。首先動畫執行時長一定要固定，並且在上一個執行時長結束之前最好不要再對width做改動，否則會導致衝突，動畫會變得很奇怪。

  • 選擇一個合理的transition執行時間：0.5s
  • 根據當前總時長，求出0.5s在進度條中所屬百分比（100/duration/2）
  • 第一次TimeUpdate事件，就執行width改變，把進度條設定到0.5s的位置：width = 100/duration/2
  • 非第一次TimeUpdate事件，每當currentTime超過上一次進度條位置，就更新當前進度條百分比

聽起來有點不好理解，我們畫個圖:

image.png

  1. 當第一次觸發TimeUpdate事件,0.1336秒的時候（當然這個值隨機的，可能是0.1～0.3之間），我們就設定width到0.5s的位置，這樣進度條就和視訊同步在運動，和真實的進度相差微弱的0.1秒。在動畫執行的0.5s之間，UpdateTime也會有多次觸發，
  2. 當某次UpdateTime的currentTime（0.7123s，這個值也是隨機的）值大於上次執行的0.5s時，這個時候進度條的位置大概也在0.5s周圍，我們再次觸發下一個0.5s動畫，也就是把width設定為1s的進度條位置
  3. 而後下個迭代currentTime>1s，width設定為1.5s，這樣迴圈下去。

核心程式碼：

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+'%'
    }
    //當前視訊進度第一次更新
    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)
        }
    }
}

最終效果對比（PS：gif圖效果有折損）

ezgif.com-gif-maker (2).gif

60s版本看起來和普通版差不多？把另一個60s擋住，來回對比，會發現還是有些區別。

解釋起來還是有點費勁，還是沒看明白？直接去看github倉庫程式碼，程式碼可直接執行:https://github.com/zimv/smooth-progress

 

此方案在部分場景下會有短暫延遲，比如暫停、拖動等，​個人總體覺得利大於弊。

相關文章