用javascript圍繞一個圓圈移動元素

我有一段代碼的JSFiddle，用於圍繞給定的圓圈旋轉元素。用javascript圍繞一個圓圈移動元素

但我不知道爲什麼這個圓圈不能正確地在這條線上移動，我必須做出一個邏輯錯誤，但我無法弄清楚錯誤是什麼。

這是我的動畫/數學代碼：

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/

我要去哪裏錯了？

來源

2015-12-28 Sir

你'obj.curAngle'是NaN計算的，因爲你的'obj.vector'是NaN爲好。此外，每次迭代都會覆蓋'obj.now'，並且'elapsed'總是相同的。 –

我現在正在更新，因爲現在每一幀都明顯改變了...... – Sir

@Dave你是否故意使用'Animation Ended'部分停止動畫？ – Bek

這裏是你工作的小提琴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 
};

來源

2015-12-28 05:29:33 Bek

用javascript圍繞一個圓圈移動元素

回答

相關問題