在屏幕上移动一个正方形并从另一侧移出

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);