让滚动公告不再抖动：巧用window.requestAnimationFrame()

见解分享

2023-12-22 20:37:53

在开发的滚屏公告中，我们不希望看到文字抖动。解决此问题的一个绝妙方案是利用window.requestAnimationFrame() API。

window.requestAnimationFrame()

window.requestAnimationFrame() 是一个强大的工具，可让您以每秒 60 帧的速度执行动画。当您需要创建流畅的动画或在用户交互时响应时，它非常有用。

原理

当您调用 window.requestAnimationFrame() 时，您正在告诉浏览器您希望在下一个重绘循环中执行特定函数。浏览器会在下一帧重新绘制之前调用该函数。这样，您的代码可以根据当前时间调整显示，从而实现平滑动画。

如何应用于滚屏公告

为了消除文字抖动，我们可以使用 window.requestAnimationFrame() 在每次重绘循环中更新滚动公告的位置。

创建一个动画循环： 在您的代码中，创建一个函数来更新滚动公告的位置。然后，使用 window.requestAnimationFrame() 在下一个重绘循环中调用此函数。
在动画循环中更新位置： 在动画循环中，根据当前时间更新滚动公告的位置。例如，您可以使用 Date.now() 获取当前时间，然后使用此时间值计算滚动公告应移动的距离。
使用 transform 属性： 使用 CSS transform 属性来更新滚动公告的位置。transform 属性使您可以移动元素，而不影响其内容的布局。

示例代码

function updateScroll() {
  const currentTime = Date.now();
  const elapsedTime = currentTime - lastTime;
  const distance = elapsedTime * scrollSpeed;
  scrollContainer.style.transform = `translateX(${distance}px)`;
  lastTime = currentTime;
  window.requestAnimationFrame(updateScroll);
}

window.requestAnimationFrame(updateScroll);