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示例

我可以沿着那个中心旋转(没有动画):

// 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示例

所以你必须使用string作为对象属性:{transform: "r15"}或{transform: "r15, centerX, centerY"}.

Answer 2

试试这个:

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