Рафаэль.JS анимировать вращение пути с заданной центральной точкой

Я пытаюсь оживить треугольник (думаю, иглу углового датчика) так, чтобы он вращался в заданной точке (см. красную точку).

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

но я не могу понять, как оживить вращение так, чтобы оно вращалось вокруг этой точки. Кажется, что он всегда вращается в центре пути.

помочь?

7
animation javascript raphael svg

3 ответов

попробуйте это:

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

С Рафаэлем.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"}.

24

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

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