优雅完善JS进度条的顺滑实现

前端

2024-02-08 00:54:14

顺滑的进度条动画：提升前端媒体播放器的用户体验

挑战：不顺畅的进度条

前端工程师经常会编写音频或视频播放器。虽然这些播放器的实现并不复杂，但一个常见的痛点是进度条的卡顿，这严重影响了用户体验。本文将深入探讨一种优化方案，帮助你实现顺滑流畅的进度条动画。

解决方案：requestAnimationFrame()

要解决进度条卡顿的问题，我们需要借助 JavaScript 的 requestAnimationFrame() 方法。这个方法可以让我们在浏览器中创建流畅的动画，因为它允许我们在每一帧都重新绘制页面，从而确保动画的连续性。

实施步骤：

定义一个动画函数： 在这个函数中，我们会更新进度条的宽度，以反映当前的播放进度。
在播放开始时调用函数： 当视频或音频播放器开始播放时，我们需要调用动画函数，这样它就可以在每一帧中更新进度条。
在播放停止时停止调用函数： 当播放器停止播放时，我们需要停止调用动画函数，这样进度条就不会再更新了。

示例代码：

以下是一个使用 requestAnimationFrame() 方法实现顺滑进度条动画的示例代码：

<video id="player" src="video.mp4"></video>
<div id="progressBar"></div>

<script>
  const player = document.getElementById("player");
  const progressBar = document.getElementById("progressBar");

  function updateProgressBar() {
    const progress = player.currentTime / player.duration;
    progressBar.style.width = `${progress * 100}%`;
    requestAnimationFrame(updateProgressBar);
  }

  player.addEventListener("play", () => {
    requestAnimationFrame(updateProgressBar);
  });

  player.addEventListener("pause", () => {
    cancelAnimationFrame(requestAnimationFrame(updateProgressBar));
  });
</script>