requestAnimationFrame - Перемещение круга

Question

Я боролся с этим какое-то время, и я не могу понять, как это правильно.

То, что я пытаюсь сделать это, есть круг, который является ДИВ поплавка вокруг внутри контейнера, который также является ДИВА. Я знаю, что это может быть достигнуто с помощью холст, но я хочу сделать это с дивы

Это то, что я до сих пор:

HTML

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

CSS

.box { 
     background-color:yellow; 
     height:300px; 
     width:500px; 
     position: relative; 
    } 
    .circle { 
     background-color:blue; 
     height:50px; 
     width:50px; 
     border-radius:50%; 
     position:absolute; 
    } 

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

скрипку: https://jsfiddle.net/6nvg8pv0/4/

Answer 1

Для начала вам придется ограничить координаты, чтобы быть внутри коробки

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

Answer 2

На самом деле вы можете ограничить движение, чтобы быть внутри поле, изменив значение, умноженное на результат sin

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

Answer 3

Почему вы добавляете 1 в синус? Вы получаете значение от 0 до 2, поэтому круг делает ширину и высоту в два раза. Возьмите абсолютное значение с помощью Math.abs. Удалите +1.