javascript - 使用javascript围绕一个圆圈移动元素

Question

我有一段代码的 JSFiddle，旨在围绕给定的圆旋转元素。

但我不知道为什么圆圈不能正确地绕直线移动，我一定是在某个地方犯了逻辑错误，但我无法弄清楚错误是什么。

这是我的动画/数学代码:

function move() {  
    if(obj.start == false){
       obj.start    = Date.now();
       obj.now      = Date.now();
    }

var elapsed             = Date.now()-obj.now;
    obj.now             = Date.now();
    obj.curAngle       += elapsed * obj.vector; 

    if((obj.now-obj.start) > obj.animationTime){ 
        alert('Animation Ended!'); 
        return; 
    }

    var x = radius * Math.cos(obj.curAngle);
    var y = radius * Math.sin(obj.curAngle);    

    div.style.left = origin.x + x + 'px';
    div.style.top  = origin.y + y + 'px';

    requestAnimationFrame(move);
}; 

还有动画的 fiddle :

http://jsfiddle.net/beu63gh5/

我哪里错了？

Answer 1

这是你的 fiddle http://jsfiddle.net/beu63gh5/2/ ，您在以旋转圆和原点为中心时遇到问题，旋转圆是从左上角而不是中心旋转。

#object {
 height:100px;
 width:100px;
 margin-left: -50px; // missing parts
 margin-top: -50px; // missing parts
 background:black;
 border-radius:100%;
 position:absolute;
}

连原点都不是从中心计算的

var origin = {
  'x': originBox.left + originBox.width / 2,
  'y': originBox.top + originBox.height / 2
};