Cómo rotar un objeto hacia adelante y hacia atrás en un punto específico?

Question

Estoy usando Raphael JS en un intento de rotar la forma de una imagen alrededor de un punto que está debajo de su punto central. ¿Cómo puede hacerse esto?

He intentado lo siguiente pero no funciona.

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

Estoy buscando la forma de volver a girar a su posición original. cómo hacer que siga su camino?

Answer 1

1. para girar alrededor de los puntos especificados, es posible utilizar el xPos y yPos ya definida, y modificarlos para hacer referencia a un punto por debajo del centro, aumentando el valor de Y.
2. Para rastrear su ruta de regreso, puede usar el parámetro callback para invocar una llamada de animación adicional que restablecerá la forma a su posición original.

aquí es cómo hacer que funcione:

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

también he creado un working example on jsFiddle para demostrar cómo se hace.