Raphael.js使用给定中心点为路径的旋转设置动画

Question

我正在尝试为三角形设置动画（想想，角度规针），使其在给定点旋转（参见红点）。

var svg = Raphael("container",400,400),
    triangle = svg.path("M210 200L190 200L200 100Z").attr({fill:"#000"}),
    circle = svg.circle(200,200,5).attr({fill:"#f00"});

// to animate ??
triangle.animate({rotation:100,cx:200,cy:200},1000,'<>');
// doesn't work

JSFiddle Example

我可以沿着那个中心旋转（没有动画）：

// to rotate with center point 200,200, works fine
triangle.rotate(80,200,200);

但我不能为我的生活弄清楚如何为旋转设置动画，使其围绕该点旋转。它似乎总是在路径的中心旋转。

任何帮助？

Answer 1

自Raphael.js版本2.0

要设置简单旋转动画，您可以使用：

yourTriangle.animate({transform: "r" + 15}, 2000);

其中：

• r =轮换
• 15 =以度为单位的角度
• 2000 =以毫秒为单位的时间。

以给定中心点

设置旋转动画

您需要指定中心坐标：
yourTriangle.animate({transform: "r60" + "," + centerX + "," + centerY}, 2000);

JSFiddle example

因此您必须使用字符串作为对象属性：{transform: "r15"}或{transform: "r15, centerX, centerY"}。

Answer 2

试试这个：

triangle.animate({rotation:"300 200 200"},1000,'<>');

Answer 3

围绕给定点旋转路径，例如一行的结尾，使用：

rapahel.path.animate({transform: "r60,100,100"}, 1000, "<>");