Javascript 用Raphael沿路径绘制SVG动画

我对SVG动画有一个相当有趣的问题

我正在使用拉斐尔沿圆形路径设置动画

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开始在一个圆中设置动画

更新

我创建了一个页面来演示这个问题：

单击“开始”以开始动画。

---

当您停止并重新启动动画时，动画将从当前的圆坐标继续，在一个正确尺寸的圆中。

问题是拉斐尔无法知道该圆已经是路径的一部分。“开始”功能的意思就是——开始一个动画。在我看来，如果它做了其他事情，它就会被打破

也就是说，您的用例是有效的，并且可能需要另一个功能——某种形式的“暂停”。当然，把它放进后备箱可能比你想等的时间要长

下面是当你叫“停止”时发生的情况

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;

在简历上

---

你有没有一个示例页面来演示这个问题？很酷，干杯。我将尝试一下。核心问题仍然存在——只有当对象从圆的“顶部”开始时，动画才会工作。如果您查看演示，对象应该沿着较大的点圆移动…暂停可以工作，但取消暂停不会启动动画。没有错误。我想可能需要再次手动启动动画。深入研究源代码来解决这个问题……我只是修改了“取消暂停”代码；它应该被修复。让我知道它是否有效。有趣的是。。。我添加了对animation（）的调用，现在的问题是，当您单击unpause时，对象将从您没有暂停的位置重新启动动画。内部发生了一些事情，使其提前跳过（这很聪明，我想这是为了确保动画保持一致，即使CPU不能按时到达每一帧）。你是冠军。明白了。我不知道如何正确设置时间戳。谢谢