Javascript requestAnimationFrame-移动圆

我已经为此挣扎了一段时间，但我似乎无法正确处理它

我想做的是，在一个容器中有一个圆，它是一个div浮动，这个容器也是一个div。我知道这可以通过画布来实现，但我想通过divs来实现

这就是我到目前为止得到的：

HTML

  <div class="box">
    <div class="circle" id="circle"></div>
  </div>

JAVASCRIPT

    var floater = function(){

    requestAnimationFrame(floater);

    var circles = document.getElementById('ball');        
    circles.style.left = (((Math.sin(new Date() / 1000) + 1)) * 500) + "px";
    circles.style.bottom = (((Math.sin(new Date() / 1000) + 1)) * 300) + "px";

}

floater();

---

小提琴：

首先，你必须限制坐标在盒子里

mycircle.style.left = Math.min(450, (((Math.sin(new Date() / 1000) + 1)) * 500)) + "px";
mycircle.style.top = Math.min(250, (((Math.sin(new Date() / 1000) + 1)) * 300)) + "px";

---

实际上，您可以通过更改sin结果与之相乘的值来限制运动在框内

  mycircle.style.left = (((Math.sin(Date.now() / 1000)) + 1) * 225) + "px";
  mycircle.style.top = (((Math.sin(Date.now() / 1000)) + 1) * 125) + "px";

---

为什么要在窦中加1？得到一个从0到2的值，因此圆的宽度和高度是原来的两倍。使用Math.abs获取绝对值。删除+1。

这就是我试图用div实现的目标，

  mycircle.style.left = (((Math.sin(Date.now() / 1000)) + 1) * 225) + "px";
  mycircle.style.top = (((Math.sin(Date.now() / 1000)) + 1) * 125) + "px";