Рафаэль вопрос - используя animateAlong - PullRequest
0 голосов
/ 31 мая 2011

Я использую Raphael для создания SVG-анимации и не могу заставить работать функцию animateAlong. Я продолжаю получать сообщение об ошибке «attrs [0] is undefined», ссылаясь на строку 3450 несжатого кода Рафаэля.

По сути, я создаю круг с данным центром, а затем хочу анимировать изображение вокруг этого пути. Вот этот простой код:

var circle = paper.circle(circleCenterX, circleCenterY, circleRadius);

Затем я клонирую изображение (поскольку я планирую разместить их на этом пути) и размещаю его на краю круга:

var wheelClone = wheel.clone();
var wheelRadius = parseInt(wheel8ImageWidth/2);
wheelClone
.translate((circleCenterX + circleRadius)-3, circleCenterY-wheelRadius);

где я запускаю circleCenterX ранее с circleCenterX = circle.attr (cx);

Это все хорошо работает с изображением, размещенным правильно - но это приводит к ошибкам на animateAlong.

Я изучил столько примеров, сколько смог найти и проанализировал документацию, но не могу понять здесь.

Итак, я просто пытаюсь вызвать функцию, но не понимаю, на что ссылается документация. Документация анимирует точку вокруг пути, но ссылается на две переменные - rx и ry, которые я не могу разузнать - как в функции init, так и с обратным вызовом.

Вот то, что у меня есть - - где RX и RY и просто помирились, поскольку я понятия не имею, к чему они относятся.

 var wheelAttr = {
  rx: 5,
  ry: 3
 };

 wheelClone.attr(wheelAttr).animateAlong(circle, 2000, true, function() {
  wheel.attr({rx: 4, ry: 4});
 });

Мой текущий jsFiddle в данный момент немного беспорядок, и я могу его почистить, но я подозреваю, что здесь есть какая-то очевидная вещь?

Спасибо всем

S

1 Ответ

0 голосов
/ 31 мая 2011

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

SVG-анимации, по-пути-с-Рафаэле

Надеюсь, это поможет.

...