如何圍繞特定點來回旋轉物體？

Question

我正在使用Raphael JS，試圖圍繞低於其中心點的點旋轉圖像形狀。如何才能做到這一點？

我已經嘗試了以下，但它不起作用。

var playBBox = playButtonRef.getBBox(); 
var xPos = playBBox.x + playBBox.width/2; 
var yPos = playBBox.y; 
var animObject = Raphael.animation({ 
    transform: playButtonRef.attr("transform") + "R60," + (this.cx - 25) + "," + this.cy 
}, 3000);​ 
animObject = animObject.repeat(10); 
playButtonRef.animate(animObject); 

我也在尋找一種方法將其旋轉回原來的位置。如何讓它追溯它的路徑？

Answer 1

1. 以圍繞指定的點，你可以使用xPos和yPos您已經定義，並修改它們通過增加Y值參考下面中心的一點。
2. 跟蹤其路徑返回，您可以使用callback param調用一個額外的動畫調用，它將重置形狀到原來的位置。

這裏是如何使其工作：

var playBBox = playButtonRef.getBBox(); 
var xPos = playBBox.x + (playBBox.width/2); 
var yPos = playBBox.y + 25; 

var animObject = Raphael.animation({ 
    transform: "R60," + xPos + "," + yPos 
}, 3000, function() { 
    playButtonRef.animate({ 
     transform: "R0," + xPos + "," + yPos 
    }, 3000); 
}); 
playButtonRef.animate(animObject); 

我也成立了一個working example on jsFiddle展示它是如何做。