JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではない

フロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤーを自分で作成しており、実装は複雑ではないと思います。最近、Weiboで動画を視聴するのと同様の要件がミニプログラムに作成されました。一部の機能では、カスタム プログレス バーの実装が必要です。最初のバージョンを完了した後、プログレス バーがスムーズでないことに気付きました。その後、オンラインで調べて、良い解決策があるかどうかを確認したいと思いましたが、結局適切なものは見つかりませんでした。そこで、WeChatミニプログラム内の「Weibo」プログレスバーがどのように見えるかを確認したかったのですが、結果も非常に硬いアニメーションになりました。下にGIFを置きました。自分でWeChatミニプログラムでWeiboを検索して、効果を確認するビデオを見つけることもできます。

従来の解決策

最終的に、この問題を最適化することにしました。まず、既存の従来のソリューションを確認しましょう。

• TimeUpdate イベントのリッスン
• 現在の再生時間を取得し、合計時間に基づいて進行状況のパーセンテージを計算します (currentTime /duration * 100)
• プログレスバーの幅プロパティは進行状況のパーセンテージを設定します

既存のソリューションは、現在の再生時間を取得するためにイベントに依存しており、このイベントは約 100 ～ 350 ミリ秒ごとに 1 回トリガーされます。以下は、記録したアプレットのイベント オブジェクト キューです。

[
    {"詳細":{"現在の時間":0.10509,"継続時間":5.83}},
    {"詳細":{"現在の時間":0.364527,"期間":5.83}},
    {"詳細":{"現在の時間":0.613648,"期間":5.83}},
]

現在の問題は、イベントが取得されるたびに、進行状況バーが遷移アニメーションなしで更新され、非常に突然になることです。以下は、合計期間が 5 秒の進行状況バーの変更プロセスです。

コアコード:

定数 onProgress = (e, $dom) => {
    const updateFunc = (パーセント) => {
        $dom.style.width = パーセント+'%'
    }
    パーセント = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) とします。
    updateFunc(パーセント)
}

遷移

最適化のために CSS アニメーション プロパティを使用することはすぐに考えられます。柔軟な制御が必要な場合は、トランジションを使用することを選択します。トランジションは、アニメーションの実行期間を定義できます。幅を変更すると、トランジションは指定された時間内にプログレス バーの幅をアニメーションで変更します。まず、アニメーションの実行期間は固定する必要があり、前回の実行期間が終了する前に幅を変更しないことが最善です。そうしないと、競合が発生し、アニメーションがおかしくなります。

• 適切な遷移実行時間を選択してください: 0.5秒
• 現在の合計継続時間に応じて、進行状況バーの 0.5 秒のパーセンテージを調べます (100/継続時間/2)
• 最初のTimeUpdateイベントは幅の変更を実行し、プログレスバーを0.5秒の位置に設定します: width = 100/duration/2
• 最初のTimeUpdateイベントではありません。currentTimeが前の進捗バーの位置を超えるたびに、現在の進捗バーのパーセンテージが更新されます。

ちょっとわかりにくいので、図を描いてみましょう。

1. TimeUpdate イベントが 0.1336 秒 (もちろんこの値はランダムで、0.1 ～ 0.3 の間になります) で初めてトリガーされたときに、幅を 0.5 秒に設定して、実際の進行状況とのわずかな差 0.1 秒で進行状況バーがビデオと同期して動くようにします。アニメーション実行の 0.5 秒間に、UpdateTime が複数回トリガーされます。
2. ある UpdateTime の currentTime (0.7123 秒、この値もランダム) が前回の実行の 0.5 秒より大きい場合、プログレス バーの位置も 0.5 秒付近になります。次の 0.5 秒のアニメーションを再度トリガーします。つまり、幅をプログレス バーの位置 1 秒に設定します。
3. 次の反復では、currentTime>1s、width は 1.5s に設定され、サイクルが継続されます。

コアコード:

const プレイコントロール = {
  パーセント: 0,
  時間: 0,
  期間: 0,
  最初: 本当
}
定数 onProgress = (e, $dom) => {
    const updateFunc = (パーセント) => {
        playControl.percent = パーセント
        再生コントロール時間 = e.detail.currentTime
        $dom.style.width = パーセント+'%'
    }
    //現在のビデオの進行状況が初めて更新される if (playControl.first) {
        再生コントロール期間 = e.detail.duration
        playControl.first = false
        updateFunc(100 / e.detail.duration / 2)
    } それ以外 {
        パーセント = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) とします。
        if (パーセント - playControl.percent > 0 || e.detail.currentTime >= e.detail.duration) {
            updateFunc(パーセント)
        }
    }
}

最終的な効果の比較（追記：gif画像の効果は損なわれています）

60年代バージョンは通常バージョンと似ていますか?他の 60 をブロックして比較してみると、まだいくつかの違いがあることがわかります。

まだ説明するのが少し難しいですか、それともまだ理解できないですか? github リポジトリのコードに直接アクセスすると、コードを直接実行できます: https://github.com/zimv/smooth-progress

このソリューションでは、一時停止、ドラッグなどの一部のシナリオで短い遅延が発生します。個人的には、利点が欠点を上回ると思います。

JS でスムーズなプログレスバーを実装するための詳細なソリューションに関するこの記事はこれで終わりです。スムーズな JS プログレスバーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。