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

у меня довольно интересная проблема с анимацией SVG.

Я анимирую по круговому пути, используя Raphael

obj = canvas.circle(x, y, size);
path = canvas.circlePath(x, y, radius);                
path = canvas.path(path); //generate path from path value string
obj.animateAlong(path, rate, false);

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

Raphael.fn.circlePath = function(x , y, r) {      
  var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z";   
  return s; 
}

пока все хорошо - все работает. У меня есть мой объект (obj), анимирующий по круговому пути.

но:

анимация работает только в том случае, если я создаю объект в тех же координатах X, Y, что и сам путь.

Если я запускаю анимацию из любых других координат (скажем, на полпути по пути), объект анимируется в круге правильного радиуса,однако он запускает анимацию из координат объекта X, Y, а не вдоль пути, как он отображается визуально.

В идеале я хотел бы иметь возможность остановить / запустить анимацию - та же проблема возникает при перезапуске. Когда я останавливаюсь, затем перезапускаю анимацию, она анимируется по кругу, начиная с остановленного X, Y.

обновление

Я создал страницу, которая демонстрирует проблему: http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

Нажмите кнопку "Пуск", чтобы запустить анимацию. Когда вы останавливаете и повторно запускаете анимацию, она продолжается из текущих координат круга в круге правильных размеров.

10
javascript jquery raphael svg

1 ответов

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

С Рафаил исходный код, вот что происходит, когда вы зовете "стоп".

Element[proto].stop = function () {
    animationElements[this.id] && animationElements[length]--;
    delete animationElements[this.id];
    return this;
};

Это уменьшает общее количество анимаций, и удаление анимации из списка. Вот как может выглядеть функция "пауза":

Element[proto].pause = function () {
    animationElements[this.id] && animationElements[length]--;
    this._paused_anim = animationElements[this.id];
    delete animationElements[this.id];
    return this;
};

это сохраняет анимацию, которая будет возобновлена позже. тогда

Element[proto].unpause = function () {
    this._paused_anim && (animationElements[this.id]=this._paused_anim);
    ++animationElements[length] == 1 && animation();
    return this;
};

не будет паузы. Учитывая условия определения области, эти две функции, возможно, потребуется ввести прямо в исходный код Raphael (это core hacking, я знаю, но иногда нет альтернативы). Я поместил бы его прямо под функцией "стоп", показанной выше.

попробуйте, и скажите мне, как это происходит.

== = = = EDIT====

Ok, поэтому, похоже, вам придется изменить атрибут "start"animationElements[this.id] ... что-то вроде:

this._pause_time = (+new Date) - animationElements[this.id].start;

в паузе, а затем

animationElements[this.id].start = (+new Date) - this._pause_time;

на резюме.

http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js#L3064

6