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

动画的小提琴：

http://jsfiddle.net/beu63gh5/

我哪里错了？

Answer 1

这里是你工作小提琴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
};

使用javascript围绕圆圈移动元素

1 个答案: