オブジェクトを特定の点を中心に前後に回転させるにはどうすればいいですか？

Question

私はラファエル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パラメータを使用して追加のアニメーション呼び出しを呼び出し、形状を元の位置にリセットします。

は、ここではそれを動作させる方法は次のとおりです。

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を設定しています。