Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo

效果

requestAnimationFrame是一个由浏览器提供的 JavaScript 方法，用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数，并返回一个整数值，可以用于取消动画循环。

使用 requestAnimationFrame 可以创建平滑的动画效果，并且能够有效地控制动画的帧率，以适应不同的设备和浏览器性能。

与使用定时器（如 setTimeout 或 setInterval）相比，requestAnimationFrame 具有以下优势：

自动适应设备刷新率：requestAnimationFrame 会自动根据当前设备的刷新率来调整动画的帧率，以提供更平滑的动画效果。

避免资源浪费：当页面处于非激活状态时，requestAnimationFrame 会暂停动画循环，从而避免不必要的资源浪费。

与浏览器的绘制周期同步：requestAnimationFrame 会在浏览器的绘制周期内执行回调函数，以确保动画的更新和渲染在最佳时机进行。

function animate() {
  // 动画逻辑...

  requestAnimationFrame(animate);
}

// 开始动画循环
requestAnimationFrame(animate);

const animationId = requestAnimationFrame(animate);

// 取消动画循环
cancelAnimationFrame(animationId);

实现代码

循环滚动

来回滚动