javascript Raphael.js 使用给定的中心点为路径的旋转设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5718956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Raphael.js Animate the rotation of a path with a given center point
提问by brad
I'm trying to animate triangle (think, needle of an angular gauge) such that it rotates at a given point (see the red dot).
我正在尝试为三角形（想想角度规的指针）设置动画，使其在给定点旋转（参见红点）。
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
I can rotate (without animating) along that center fine:
我可以沿着那个中心旋转（没有动画）很好：
// to rotate with center point 200,200, works fine
triangle.rotate(80,200,200);
But I can't for the life of me figure out how to animate the rotation such that it rotates around that point. It always seems to rotate at the center of the path.
但是我一生都无法弄清楚如何为旋转设置动画以使其围绕该点旋转。它似乎总是在路径的中心旋转。
Any help?
有什么帮助吗？
回答by Zakhar
Since Raphael.js version 2.0
从 Raphael.js 2.0 版开始
To animate simple rotation you can use:
要为简单旋转设置动画，您可以使用：
yourTriangle.animate({transform: "r" + 15}, 2000);
yourTriangle.animate({transform: "r" + 15}, 2000);
Where:
在哪里：
r= rotation15= angle in degrees2000= time in milliseconds.
r= 旋转15= 以度为单位的角度2000= 以毫秒为单位的时间。
To animate rotation with given center point
用给定的中心点动画旋转
You need to specify center coordinates:yourTriangle.animate({transform: "r60" + "," + centerX + "," + centerY}, 2000);
您需要指定中心坐标：yourTriangle.animate({transform: "r60" + "," + centerX + "," + centerY}, 2000);
So you have to use stringas an object property: {transform: "r15"}or {transform: "r15, centerX, centerY"}.
所以你必须使用string作为对象属性：{transform: "r15"}or {transform: "r15, centerX, centerY"}。
回答by Erik Dahlstr?m
Try this:
试试这个：
triangle.animate({rotation:"300 200 200"},1000,'<>');
回答by thomas
To rotate a path around a given point, e.g. the end of a line, use this:
要围绕给定点（例如线的末端）旋转路径，请使用以下命令：
rapahel.path.animate({transform: "r60,100,100"}, 1000, "<>");
