图片低速连续左移卡顿问题求助（setTimeout嵌套requestAnimationFrame）

嘿，我来帮你搞定这个图片移动卡顿的麻烦！你现在遇到的问题，根源在于错误地把setTimeout和requestAnimationFrame嵌套使用——这俩家伙的工作逻辑完全不搭，混在一起只会打乱动画的流畅节奏。

为什么会卡顿？ #

requestAnimationFrame是浏览器专门为动画打造的API，它会自动和浏览器的刷新频率（通常是60次/秒）同步，确保每一帧都在浏览器准备好渲染的时候更新，天生就是为流畅动画设计的。而setTimeout的延迟是不精确的，它的回调会被放进浏览器的任务队列，只要前面有其他任务没完成，就会被延迟执行，和requestAnimationFrame的同步机制冲突，自然就会出现卡顿、掉帧的情况。

正确的实现方式：只用requestAnimationFrame+时间差控制速度 #

我们只需要用requestAnimationFrame来构建动画循环，同时通过计算时间差来控制移动速度（代替你原本想实现的“时间延迟”效果），这样既能保证动画平滑，又能精准控制移动快慢。

下面是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Moving Screen Saver</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden; /* 避免滚动条出现 */
            background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        #moving-img {
            position: absolute; /* 绝对定位才能通过left控制位置 */
            width: 100px; /* 示例宽度，按需调整 */
            height: auto;
            /* 初始位置可以自己设置 */
            left: 100vw; /* 从屏幕右侧开始 */
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <img id="moving-img" src="你的图片地址" alt="移动的图片">

    <script>
        const movingImg = document.getElementById('moving-img');
        let lastTime = 0;
        const moveSpeed = 150; // 移动速度：像素/秒，数值越小越慢

        function animate(currentTime) {
            // 计算时间差（单位：秒）
            const deltaTime = (currentTime - lastTime) / 1000;
            lastTime = currentTime;

            // 更新图片位置：速度 * 时间差 = 本次移动的距离
            const currentLeft = parseFloat(window.getComputedStyle(movingImg).left);
            movingImg.style.left = `${currentLeft - moveSpeed * deltaTime}px`;

            // 当图片移出屏幕左侧后，可以重置位置（可选）
            if (parseFloat(movingImg.style.left) < -movingImg.offsetWidth) {
                movingImg.style.left = '100vw';
            }

            // 递归调用，持续动画
            requestAnimationFrame(animate);
        }

        // 启动动画
        requestAnimationFrame(animate);
    </script>
</body>
</html>

代码关键点说明： #

1. 时间差控制移动：通过currentTime - lastTime计算两次动画帧之间的时间间隔，再乘以速度，得到本次应该移动的距离。这样不管浏览器帧率如何波动，图片的移动速度都是恒定的，不会忽快忽慢。
2. 纯requestAnimationFrame循环：没有嵌套setTimeout，完全依赖浏览器的刷新节奏，确保每一帧都在最佳时机渲染，从根源避免卡顿。
3. 重置位置逻辑：当图片完全移出屏幕左侧后，把它放回屏幕右侧，实现循环移动的效果（如果不需要循环，可以去掉这部分）。

只要按照这个方式修改，你的图片移动动画应该就会变得非常平滑啦！

内容的提问来源于stack exchange，提问作者kadina