Javascript 如何设置网格动画以在不冻结/跳跃的情况下滑动？

我的画布上有两个网格

mesh

和

mesh2

。我将

mesh2.position.x

设置为

10

，使其位于网页的右侧。我的页面上有一个左箭头按钮，单击该箭头时，我希望

mesh2

滑动到

0

的位置，以便将其置于网页的中心

document.getElementsByClassName("arrow left")[0].addEventListener("click", slideAnimation, false);

   function slideAnimation() {

    var pos = mesh2.position.x;
    var id = setInterval(frame, 10);
    function frame() {
      if (pos <= 0) {
        clearInterval(id);
      } else {
        pos -= .8;
        mesh2.position.x = pos;
      }
    }
  }

---

但是，滞后仍然存在。有人知道在画布上平滑滑动网格的解决方案吗？我的目标是做一些类似于本网站主页的事情：

尝试使用

requestAnimationFrame

而不是

setInterval

。好的，谢谢，这样更好。如果你留下一个答案，我会接受。我并不是说这项技术对你来说并不新鲜——每个人都是第一次异步遇到事情——但是使用

requestAnimationFrame

进行平滑动画（以及它比

setInterval

的好处）已经得到了很好的讨论，

three.js

示例也大量使用了

requestAnimationFrame

。在我看来，我并不认为有必要给出一个完整的答案，除非我们能找到一个能回答平滑动画这一广义问题的答案，让我们把这个问题标记为一个重复的问题。

canvas {
    width: 2500px;
}