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

Answer 3

Чтобы повернуть путь вокруг данной точки, например, конец строки, используйте это:

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