JavaScript – 与拉斐尔的路径的SVG动画

我有一个非常有趣的SVG动画问题.

我使用拉斐尔在循循环径上动画

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

circlePath方法是我自己创建的,用于生成SVG路径符号中的圆形路径：

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

到目前为止,一切都很好.我有我的对象(obj)沿循循环径动画.

但：

该动画只有在我创建的对象在同一个X,Y坐标作为路径本身时才起作用.

如果我从任何其他坐标开始动画(比如沿路径的中途),物体就会以正确半径的圆圈动画,但它会从对象X,Y坐标开始动画,而不是沿着路径在视觉上显示.

理想情况下,我想停止/启动动画 – 重新启动时出现同样的问题.当我停止,然后重新启动动画,它从停止的X,Y开始动画在一个圆圈.

UPDATE

我创建了一个演示该问题的页面：
http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

点击“开始”开始动画.
当您停止并重新启动动画时,它将继续从当前圆圈中的正确尺寸的圆圈.

解决方法

问题是拉斐尔无法知道这个圈子已经沿着道路走过了路. “开始”功能就是这样 – 启动一个动画.如果它做任何事情,它将被打破.

也就是说,您的用例是有效的,可能需要另一个功能 – 某种“暂停”.当然,把它放到后备箱中可能要比你想要的要长一些.

从Raphael source code开始,当您拨打“停止”时,会发生什么.

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源代码中(这是核心黑客,我知道但有时候别无选择).我会把它放在上面显示的“停止”功能的正下方.

尝试一下,告诉我怎么回事

==== ====编辑

好的,所以看起来你必须修改animationElements [this.id]的“start”属性,如：

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