在屏幕上移动方块并移到另一侧

Question

我需要在屏幕上移动一个正方形。当到达终点时，它应该以连续循环的形式再次出现在起点。

我可以使用setInterval做到这一点。但是我想使用requestAnimationFrame调用该函数。目前，正方形一直沿一个方向移动并离开屏幕。我的代码使用的是jQuery。

  let block = document.getElementById('mydiv');
  let startPos = 0;
  function moveStone(timestamp){
    startPos += 5;
    block.style.left = startPos + 'px';
    requestAnimationFrame(moveStone);
  }`enter code here`
  requestAnimationFrame(moveStone);

我希望正方形会重新出现在起点处，但它会在一个方向上不断变化。

Answer 1

可以通过多种方式实现代码循环。这是模数法（警告！未经测试！）；

  let block = document.getElementById('mydiv');
  let startPos = 0;
  const maxPos = 100;
  function moveStone(timestamp){
    startPos += 5;
    block.style.left = (startPos % maxPos) + 'px';
    requestAnimationFrame(moveStone);
  }
  requestAnimationFrame(moveStone);