Come ruotare un oggetto avanti e indietro attorno a un punto specifico?

Question

Sto utilizzando Raphael JS nel tentativo di ruotare una forma di immagine attorno a un punto che si trova al di sotto del suo punto centrale. Come si può fare?

Ho provato quanto segue ma non funziona.

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

Sto anche cercando un modo per riportarlo nella posizione originale. come faccio a far risalire il suo percorso?

Answer 1

1. di ruotare intorno ai punti specificati, è possibile utilizzare il xPos e yPos già definiti, e modificarli fare riferimento a un punto sotto il centro aumentando il valore Y.
2. per tracciare il percorso, è possibile utilizzare il parametro callback per richiamare una chiamata di animazione aggiuntiva che reimposterà la forma nella sua posizione originale.

ecco come farlo funzionare:

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

ho anche istituito un working example on jsFiddle per dimostrare come si fa.