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

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