Wie man ein Objekt um einen bestimmten Punkt hin und her dreht?

Question

Ich benutze Raphael JS in einem Versuch, eine Bildform um einen Punkt zu drehen, der unter seinem Mittelpunkt liegt. Wie kann das gemacht werden?

Ich habe Folgendes versucht, aber es funktioniert nicht.

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

Ich bin auch auf der Suche nach einer Möglichkeit, es wieder in seine ursprüngliche Position zu drehen. Wie kann ich den Weg zurückverfolgen?

Answer 1

1. um den angegebenen Punkten zu drehen, können Sie verwenden die xPos und yPos Sie haben bereits definiert, und ändern Sie sie durch eine Erhöhung der Y-Wert einen Punkt unterhalb der Mitte zu verweisen.
2. , um seinen Pfad zurückzuverfolgen, können Sie den callback Parameter verwenden, um einen zusätzlichen Animationsaufruf aufzurufen, der die Form an ihre ursprüngliche Position zurücksetzt.

hier, wie es funktioniert:

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

Ich habe auch eine working example on jsFiddle einrichten zu zeigen, wie es gemacht wird.