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

但是我始终弄不清楚如何使旋转动画围绕该点旋转。它似乎总是在路径的中心旋转。

需要帮助吗？

- brad

Answer 1

自 Raphael.js 版本 2.0 起

要实现简单的旋转动画，您可以使用以下代码：

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

其中：

• r = 旋转
• 15 = 角度数
• 2000 = 毫秒数。

要实现给定中心点位置的旋转动画

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

JSFiddle 示例

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

- Zakhar

Answer 2

试试这个：

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

- Erik Dahlström

---

太棒了！非常感谢，这个东西在任何地方都没有记录，你是怎么知道的？ - brad

大多数文档都有缺陷，但你总可以尝试（或阅读真正的文档，即js源代码 ;) ）。你还可以使用自己的自定义动画格式扩展raphaël，请参见http://raphaeljs.com/reference.html#custom-attributes。 - Erik Dahlström

我经常查看源代码，但 Raphael 的源代码相当晦涩，加上极少量的注释，使得解析有些困难。感谢你提供 customAttributes 的提示，这肯定会有所帮助 :) - brad

Answer 3

要围绕给定点旋转路径（例如线条的末端），请使用以下内容：

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

- thomas