如何为网格设置动画以使其滑动而不会冻结/跳跃？

Question

我的画布mesh和mesh2上有两个网格。我将设置为mesh2.position.x的{​​{1}}加载到网页的右侧。我的页面上有一个向左箭头按钮，希望单击该箭头时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;
      }
    }
  }

但是滞后仍然存在。有谁知道在网格上平滑滑动网格的解决方案？我打算做类似该网站首页的内容：https://www.getwearable.net/fitness