基於鼠標位置的圖像旋轉

Question

我有下面的腳本設置爲旋轉我的頁面中心的圓圈以跟隨光標的移動。它最初是爲了追隨包含在框中的運動而創建的，但我試圖讓它遵循頁面周圍的圈子，但我不確定如何正確地使用這些內容，您可以分享哪些洞察力？

http://coreytegeler.com/new/

var circle = $('#circle'); 
    var offset = circle.offset(); 

     function mouse(e) { 

      var center_x = (offset.left) + ($('#home').width()/2); 
      var center_y = (offset.top) + ($('#home').height()/2); 
      var mouse_x = e.pageX; 
      var mouse_y = e.pageY; 

      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
      var degree = (radians * (180/Math.PI) * -1) + 180; 

      circle.css('-moz-transform', 'rotate('+degree+'deg)'); 
      circle.css('-webkit-transform', 'rotate('+degree+'deg)'); 
      circle.css('-o-transform', 'rotate('+degree+'deg)'); 
      circle.css('-ms-transform', 'rotate('+degree+'deg)'); 

     } 

Answer 1

這應該工作：

var circle = $('#circle'); 
var circleCenterX = circle.width()/2; //Calculate these once 
var circleCenterY = circle.height()/2; 
var offset = circle.offset(); 

function mouse(e) { 

    var center_x = (offset.left) + (circleCenterX); 
    var center_y = (offset.top) + (circleCenterY); 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 

    var radians = Math.atan2(mouse_x - center_x, center_y - mouse_y); //y is backwards from cartesian coordinate system. No need to convert to degrees. 

    circle.css('-moz-transform', 'rotate('+radians+'rad)'); 
    circle.css('-webkit-transform', 'rotate('+radians+'rad)'); 
    circle.css('-o-transform', 'rotate('+radians+'rad)'); 
    circle.css('-ms-transform', 'rotate('+radians+'rad)'); 

} 

或者，如果你有延遲想它（少許乾淨的代碼）：

var circle = $('#circle'); 
var circleCenterX = circle.width()/2; 
var circleCenterY = circle.height()/2; 
var offset = circle.offset(); 
var radiansSet = new Array(9); 
var radiansIntervalID = undefined; 
var radians; 

function mouse(e) { 

    var center_x = offset.left + circleCenterX; 
    var center_y = offset.top + circleCenterY; 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 

    radians = Math.atan2(mouse_x - center_x, center_y - mouse_y); 

    if(radiansIntervalID === undefined) { //If not running the timer & mouse moved, start it! 
     radiansIntervalID = setInterval(adjusterInterval, 20); 
    } 
} 

var adjusterInterval = function() { //Interval to help rotate with slight delay 
    var i = 0, len = radiansSet.length; 
    var lastRad = radians; 
    var anyDifferent = false; 

    while(i < len - 1) { //Move down list of last checked mouse positions & check to see if different in 9 iterations. 
     if(!anyDifferent && radiansSet[i] != lastRad) { 
      anyDifferent = true; 
     } 
     radiansSet[i] = radiansSet[i + 1]; 
     lastRad = radiansSet[i]; 
     i++; 
    } 

    radiansSet[len - 1] = radians; //Append to last in list 

    if(radiansSet[0] !== undefined) { //Change the first in the list (8 iterations ago) 
     circle.css('-moz-transform', 'rotate(' + radiansSet[0] + 'rad)'); 
     circle.css('-webkit-transform', 'rotate(' + radiansSet[0] + 'rad)'); 
     circle.css('-o-transform', 'rotate(' + radiansSet[0] + 'rad)'); 
     circle.css('-ms-transform', 'rotate(' + radiansSet[0] + 'rad)'); 
    } 

    if(!anyDifferent) { //If not changed.... 
     clearInterval(radiansIntervalID); //Turn off timer to save CPU 
     radiansIntervalID = undefined; 
    } 
}; 

在測試這個我開發，它爲我工作得很好。請注意，可以通過減少間隔長度來使動畫更平滑，並通過增加radiansSet數組的長度來延長時間。