Raphael animateWith - 动画的起源？

Question

我有什么方法可以围绕不同元素的起源制作某个Raphael元素的动画？ 例如，在下面的小提琴中，有一个较大的灰色矩形和一个较小的蓝色方块。当我单击红色或绿色框时，两个图像顺时针或逆时针旋转。 我希望蓝色方块不仅可以旋转90度，还可以平滑平移，看起来它就像是坐在灰色矩形的角落里。

anim = Raphael.animation({transform: "r"+(spincount+90)}, 500 );
big.animate(anim);
small.animateWith(big, animParam , anim);

http://jsfiddle.net/nUXVz/

我唯一能想到的是要么我没有正确使用animateWith（）方法，要么在我的动画中，我需要应用某种翻译。

谢谢！

Answer 1

经过几个小时的修补，我设法得到了我想要的东西。

http://jsfiddle.net/nUXVz/1/

为了得到我想要的东西，我最终添加了动画的翻译。所以我从较大的灰色矩形的中间进行了平移（x和y方向的坐标+（长度/ 2））。

anim = Raphael.animation({transform: "r"+(spincount+90)+","+axisX+","+axisY}, 500 );

如果其他人有任何进一步的问题或更容易解决方案随时发布。