How to rotate an object back and forth around a specific point?

问题

I'm using Raphael JS in an attempt to rotate an image shape around a point which is below its center point. How can this be done?

I have tried the following but it doesn't work.

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

I'm also looking for a way to rotate it back to its original position. how to I make it trace its path back?

回答1:

1. to rotate around the specified points, you may use the xPos and yPos you've already defined, and modify them to reference a point below the center by increasing the Y value.
2. to trace its path back, you can use the callback param to invoke an additional animation call which will reset the shape to its original position.

here's how to make it work:

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

i have also set up a working example on jsFiddle to demonstrate how it's done.

来源：https://stackoverflow.com/questions/10241315/how-to-rotate-an-object-back-and-forth-around-a-specific-point